How to make search bar bigger and move the left by 20px |
How to make search bar bigger and move the left by 20px |
spalisetty |
Sep 6 2020, 04:38 AM
Post
#1
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
CODE <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Simply Play</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <style> .navbar{ background-color:rgb(197, 206, 219); } .form-control{ margin-top: 9px; border-radius: 40px; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="https://www.google.com" class="navbar-brand">SP</a> </div> <ul class="nav navbar-nav"> <li> <a href="#">Home</a> </li> <li> <a href="#">English Movies</a> </li> <li> <a href="#">Hindi Movies</a> </li> <li> <a href="#">Telugu Movies</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><input class="form-control" type="text" placeholder="Search" aria-label="Search"></li> <li> <a href="#">Contact Us</a> </li> <li> <a href="#">Logout</a> </li> </ul> </div> </nav> </body> </html> This post has been edited by spalisetty: Sep 6 2020, 04:39 AM |
pandy |
Sep 6 2020, 12:34 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
The size of the box you type in? Give .form-control the width you want.
To move it was harder. I guess one would need to override stuff in the bootstrap style sheet you use. |
spalisetty |
Sep 7 2020, 03:26 AM
Post
#3
|
Novice Group: Members Posts: 22 Joined: 2-August 20 Member No.: 27,469 |
The size of the box you type in? Give .form-control the width you want. To move it was harder. I guess one would need to override stuff in the bootstrap style sheet you use. Thank You so much. I don't want to move it. My intention was, if we increase width, it should move to the left. |
pandy |
Sep 7 2020, 08:32 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
OK. That it does.
|
Lo-Fi Version | Time is now: 18th April 2024 - 07:46 PM |