In the link below:
http://bootply.com/69899
You can see that the input text box is left aligned in the navbar. Is there any way I can align it at the center of the navbar (both horizontally and vertically)?
Try this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test</a>
<form class="navbar-search pull-left">
<input type="url" placeholder="none">
</form>
</div>
</div>
</div>
Worked fine for me. Considering you are using bootstrap.
Setting line-height to your div height and using the common align-center should help.
Related
I want to add a sticky header to my page and bootstrap provides a class for it, also I added a container to center the content and make it as wide as the content below.
But when I add a row and 12 columns not the full width of the container is taken, see below for the code.
<nav class="navbar fixed-top navbar-light sticky-header">
<div class="container sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
You could add a class to your row like so:
EDIT: As ZimSystem pointed out, there is a w-100 class in bootstrap, so just do:
<div class="row w-100">
Your Elements
</div>
This should get you 100% of the containers width.
Working sample: https://www.bootply.com/J5gKTedgPr
The Bootstrap 4 Navbar isn't designed to contain the grid rows and cols. It's designed to contain the support content.
When you use a container inside a navbar it makes the container display:flex which is making the row you have in the container align to the start (left-side) of the container which won't fill the width.
As a workaround/hack you could revert the container to display:block using d-block, and then remove the default left/right padding from the navbar using px-0:
https://www.codeply.com/go/T81SqA32rJ
<nav class="navbar fixed-top sticky-header px-0">
<div class="container-fluid d-block sticky-header-container">
<div class="row">
<div class="col-md-3">test3
</div>
<div class="col-md-6">test2
</div>
<div class="col-md-3">test3
</div>
</div>
</div>
</nav>
I am learning bootstrap. At this time, I'm trying to add a footer to my page. I need my footer to look like this:
+-----------------------------------------------------------------+
| Hello Thank you for visiting [logo] |
+-----------------------------------------------------------------+
Basically, the idea is to have three sections. The content in the first is left aligned. The content in the second is centered. Finally, the content in the third is right aligned. In an attempt to do this, I did the following:
<nav class="navbar navbar-static-top navbar-dark bg-inverse">
<span class="navbar-brand">Hello</span>
<span class="center-block"><span class="center-text">Thank you for visiting</span></span>
<span class="pull-right"><div class="pull-right">[logo]</div></span>
</nav>
Unfortunately, this does not work. The content does not appear on the same line (its all jagged, I was hoping for it be vertically centered). Also, the "Thank you for visiting" is not centered. It is left justified.
I'm not sure what I"m doing wrong.
I'm not sure why you are using nav but this solution might work for you:
<div class="container">
<div class="row">
<div class="col-sm-4 text-left">
<p>Hello</p>
</div>
<div class="col-sm-4 text-center">
<p>Thank you for visiting</p>
</div>
<div class="col-sm-4 text-right">
<p>[logo]</p>
</div>
</div>
</div>
Hello use this code this works perfect. Make sure that you add the bootstrap js and css files.
<footer class="navbar navbar-static-bottom navbar-default">
<div class="container" style="width">
<div class="navbar-header">
<div class="navbar-brand" style="padding-left:0px; !important;color:#555 !important;">
Hello
</div>
</div>
<div class="navbar-header">
<div class="navbar-brand" style="position:absolute;text-align:center;width:1000px;">
Welcome to my website
</div>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-brand">
Logo goes here
</div>
</div>
</div>
</footer>
Enjoy....!
I'm building a rails app right now using bootstrap for the UX. I need help figuring out how to keep the container class from appearing under the navbar. This is what the html for the page looks like:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<span class="pull-right"> Title text goes here </span>
</div>
</div>
</header>
<div class="container">
<%= yield %> <br / >
</div>
The only CSS on the page is css from bootstrap.
look at bootstrap samples, maybe you need to add style for the body:
body {
padding-top: 40px;
}
Any particular reason you need the div with the "container" class inside of the "navbar-inner" div? I would suggest changing the class of that to "brand", ditching the span, and putting your title text inside that brand div, like so:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="brand pull-right">Title text goes here </div>
</div>
</header>
Bootstrap can be picky about how various classes are nested and you should follow the same structure as outlined in the documentation:
http://twitter.github.io/bootstrap/components.html#navbar
So what I'm trying to do is have my navbar automatically center to anything that's in it.
What I want is:
Logo all the way on the left (pulled left)
Button all the way on the right (pulled right)
Search bar directly in the center of the navbar
What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.
Here's my current code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
<div class="nav-collapse collapse">
<div class="span4 offset1">
<form class="navbar-form pull-right">
<div class="input-append">
<input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
</form>
</div>
<ul class="nav pull-right">
<a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Note:
The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.
Please help!
It should work as you've described, but that isn't what your code reflects.
Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).
you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/
.logo {
float:left;
}
Default navbar spans horizontally across the browser window.
<div class="navbar navbar-static-top">
How do you declare the navbar to be only 750px width and placed at the center?
Setting margin:auto; in the CSS doesn't work.
The .navbar-static-top you are using forces your navbar to become full-width. Remove that class and you will get a resizable navbar. Then, you can wrap it in a span# of the size you want:
<div class="container">
<div class="row">
<div class="span6 offset3">
<div class="navbar">
...
</div>
</div>
</div>
</div>
Here you have an example: http://jsfiddle.net/simbirsk/xAMYF/