What I'm trying to do is have the search box in the center of the navbar (image here). How would I do that?
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">logo</a>
<div class="nav-collapse collapse">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button">Search</button>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
I'm using the default CSS that comes with Bootstrap.
wrap the form element within its own div and give it a class or an id, then create a custom line of code to center it, example:
HTML:
<div id="search">
*form code here*
</div>
CSS:
#search { width: 200px; margin: auto; }
if you need to override built in CSS in an application, use !important like so:
<div style="margin: 0px auto !important;"></div>
Or, put it in your css class.
See this...
.nav-collapse{
margin-right: 50%;
}
Example
Struggled with this for a long time too, for Bootstrap 3.
I finally found this solution which worked perfectly for me:
Bootstrap NavBar with left, center and right aligned items
Just added a class to the inside my navbar around my search box, with the css definition in Skelly's answer.
I did then have to apply text-align:left to some of elements in my form (e.g. typeahead suggestions attached to my search form).
Related
Kindly help and let me know where am i making the mistake as i can not make the options in the navbar go into the right side. Here i am sharing the code.
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="padding-left: 40px; padding-right: 40px;">
<div style="float: left;">
<a class="navbar-brand" href="homePage.php">Job Portal</a>
</div>
<div class="topnav-right" style="float: right;">
<a href="homePage.php">
<button class="btn btn-outline-success" type="button" >
Home
</button>
</a>
<a href="signinPageOfJobSeekers.php">
<button class="btn btn-outline-success" type="button">
Sign In or Sign up
</button>
</a>
<button class="btn btn-outline-success" type="button">
Contact Us
</button>
<?php if(!empty($_SESSION['userName'])){ ?>
<a href="logOut.php">
<button class="btn btn-outline-success" type="button">
Log Out
</button>
</a>
<?php } ?>
</div>
</nav>
</div>
Your code is not enough to give you a perfect solution. However, here is my shot:
I assume that the wrapper container <div> ... </div> you have spans 100% of the viewport width? If this is the case, you can add the following style attribute:
<div style="display: flex; justify-content: flex-end;">
<nav>
// rest of the HTML code in your example
</nav>
</div>
Of course, for a cleaner solution, instead of adding an inline style attribute, you can add a CSS class and style it in a separate stylesheet file or style tag in your document <head>:
<div class="nav-wrapper">
<nav>
// rest of the HTML code in your example
</nav>
</div>
and then in your CSS declarations
.navWrapper {
display: flex;
justify-content: flex-end;
}
Alternative solution
If you are okay with your navigation overlapping the rest of the page content, you can always position: fix it. This way it would be taken out of the document flow and overlayed on top of the other HTML elements on your page. Here is the CSS needed:
.nav-wrapper {
position: fixed;
top: 0px;
right: 0px;
z-index: 999; // <- increase this value if any elements are on top of your nav
}
Have you considered using a flex box?
https://www.youtube.com/watch?v=K74l26pE4YA
Flex box is super useful for things like positioning and layout of items in a list. Check out some of the ways you can justify content: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Also, each individual, item can be aligned with align-self.
It's a fairly powerful way or organizing content. We can't see all of your css at the time of answering this question, but I'd take a look at the first video if you aren't already using a flexbox or to see how it works if you have a bug with one. It might work for you in this case!
I use Bootstrap 3.3.7 and I wonder how to display:
Header element h1 aligned to the left of the page-header
button element aligned to the right of the page-header
Both elements being on the same baseline
Current code is pasted below and the working example is on JSFiddle. My question is similar to this question, but proposed solution does not work for me.
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<div class="pull-left">
<h1>Hello World <small>Home Page</small></h1>
</div>
<div class="pull-right">
<button class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</body>
Your problem is with the CSS, not the markup
The fiddle you provided works as expected, the reason why the elements don't seem to align properly is because bootstrap sets a default margin on h1 elements while it doesn't do so with buttons.
The easiest way to fix this is to add
h1 {
margin: 0;
}
To your site's CSS.
Alternatively for similar output in a "bootstrappy" way, you can look into bootstrap navbars and branded bootstrap navbars.
Remove top margin from header element:
.page-header h1 {
margin-top: 0;
}
I am using Bootstrap to build a site and am running into issues with the navbar. The navbar normally has the "brand" link and a search box, but when the navbar collapses I want it to be just the search box instead of just the brand link.
Here's the navbar uncollapsed:
navbar-sm
...and here's the navbar collapsed:
navbar-xs
and here's the code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs">FU</a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label class="sr-only" for="navbarSearchField">Search</label>
<input type="search" class="form-control" placeholder="Search" id="navbarSearchField">
</div>
</form>
</div>
</div>
</nav>
Any way I can get rid of the extra padding and lines above and below the search box? It shows up whether the search box is in the menu or on its own. As this is on an extra-small screen, I don't want to waste screen space if at all possible. :)
To remove the padding you can just override some CSS values of the .navbar-form. Use the appropriate media query so the changes only affect the xs screen size:
#media(max-width:768px) {
.navbar-form {
padding-top: 0;
padding-bottom: 0;
border: 0;
}
.navbar-form .form-group {
margin-bottom: 0;
}
}
See this demo fiddle.
Tip: When customizing Bootstrap CSS or any other framework it is useful to use your browser's inspection tools to figure out what CSS rules you need to modify.
I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.
<div class="col-sm-5" style="text-align:left">
<button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
<h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
<ul class="nav nav-pills">
<li class="active">Email History</li>
<li class="active">Back To List</li>
</ul>
</div>
NOTE: The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.
The easiest option is to add the class pull-right to the ul element. This will float the pills to the right.
Sidenote: you can replace those inline styles with the helper classes text-left (which is often redundant) and text-center.
Here's a bootply example: http://www.bootply.com/134139
Need to overwrite some Bootstrap styling...
You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.
Here's the CSS:
ul.nav.nav-pills {
text-align: right;
}
.nav-pills>li {
float: none;
display: inline-block;
}
Enjoy!
Try a style="float:left;" on each div. And a <ul class="nav nav-pills" style="float:right;">. After that clear the float.
I have following code in the html file:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<p class="navbar-text pull-right">This is first notice.</p><br/>
<p class="navbar-text pull-right">This is second notice. </p>
</div>
</div>
</div>
I am getting the output like this:
Notice that "This is second notice" is not aligned properly with respect to the line above it. I am trying to get the two notices aligned properly with each other.
I also tried removing <br/> from code above but with that I get the following output:
Could someone please point me what I am doing wrong?
JSFiddle: http://jsfiddle.net/N6vGZ/23/
The reason both paragraphs are not aligning properly in the navbar is because the default line-height of 40px set forth by the bootstraps doesn't allow them both to stack correctly. You can fix that by setting a lower line-height, something like 20px should do the trick.
Note: i included both paragraphs inside a container that i can easily float and target with my own class, as not to bother the other elements around it.
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="notices pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice.</p>
</div>
</div>
</div>
</div>
Try this:
CSS
.notices p {
line-height:20px !important;
}
Demo: http://jsfiddle.net/N6vGZ/29/
You didn't include the css but I assume that you have "float: right" on your "pull-right" class.
I think the easiest way to solve it is to wrap the two p's in their own div and float that dive right:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
Hello Bootstrap
<div class="pull-right">
<p class="navbar-text">This is first notice.</p>
<p class="navbar-text">This is second notice. </p>
</div>
</div>
</div>
Don't forget to set a width on the "pull-right" class in your css if you haven't already.
You can use ul with nav class and li with pull-right
http://jsfiddle.net/N6vGZ/28/