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/
Related
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 have a very simple piece of code that I am trying to get to work and its giving me issues.
I have a grid of 9 and 3 set up. 9 being the tool title and 3 being the status of the tool.
In the code below however, even though I am using pull-right to get the content to the right side of the col-md-3 the content within that isn't aligned to the right like I expect it to be.
Here is a fiddle: https://jsfiddle.net/p5yctnw0/2/
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
</div>
What I would expect:
I know this is going to be a silly css attribute I am missing but not sure what else to try.
The content is aligned to the right but the text is not right aligned. Use text-right css class to right align the text.
<span class="pull-right text-right">
<h4>Active</h4>
(dates & replacement if applicable)
</span>
You can use let the text to the right:
.col-md-3 {text-align:right}
https://jsfiddle.net/p5yctnw0/5/
https://jsfiddle.net/p5yctnw0/3/
Use the class text-right when it comes to text. pull-right is for divs.
Basically what you are looking for is text-align:right . Use it to get your desired output. If you want both the span and the trailing text to be pulled right, use #van-tuan-pham 's answer. Or use only to the span.
But do not override bootstrap classes. Instead use your own class or id selectors to set css attributes.
simply do like this way
.alignment {
text-align:right;
}
.alignment span {
display:block;
font-size:13px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 alignment">
<h4>Active <span>(dates & replacement if applicable)</span></h4>
</div>
</div>
</div>
Looks like it pulls the div right, but the spans are still left aligned within the div.
Split the div into 2 spans, one for each line.
<div class="col-md-3">
<span class="pull-right">
<h4>Active</h4>
</span>
<span class="pull-right">(dates & replacement if applicable)</span>
</div>
replace row div your code with following:
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
On my current website using bootstrap, I have a set of 'wells' within a container-fluid. The effect I am trying to achieve is to have each well is side by side in one row. This was fine for a few wells. However, now I have added more wells and I have begun testing on smaller resolutions.
Now, when the wells reach the edge of the browser window, they wrap around. This is not the behavior I'd like. Instead, I would like a horizontal bar to appear and allow users to scroll sideways to view the rest of the wells. All the wells should be in the same row, irrespective of screen resolution, the number of wells, and the width of the well's contents.
Here is a brief section of code to give you an idea of my structure:
<div class="container-fluid">
<div class="row">
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 1 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 2 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 3 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<!-- MORE WELLS HERE -->
</div>
</div>
Am I using the correct Container? How can I achieve this 'no wrap' row result?
Thanks!
You may need some custome CSS to get that result use this:
<div class="container-fluid">
<div class="row wells"> // ADD Class "wells"
<div class="span">
Then on CSS
.row.wells {
white-space:nowrap;
overflow:auto;
}
.span {
display:inline-block;
}
Check this Demo
I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}
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).