I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid
Related
I have been experiencing this subtle oddity in my handlebars template using bootstrap.
The issue is that the entire contents of the page shifts approx 10px to the left when three or more items are in the database (the code within {{#orglist}} occurs three or more times).
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
{{#orglist}}
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
{{/orglist}}
</div>
</div>
The same issue occurs if I manually do the markup:
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Some notes
The issue is independent of custom css.
The reason this issue bothers me, and how I noticed it, is that
it's a multi-page site and it causes the alignments to differ.
This template does have an accompanying layout template, but the issue appears to be independent of that.
Any thoughts?
Solved: see approved answer below
Fix is Ruben's answer here: How to prevent scrollbar from repositioning web page?
Largest ratio of time searching for issue vs. solution ease I have ever had.
browser vertical scroll bar show-up when rows >= 3?
As per bootstrap standards, one 'row' should be placed within a .container or .container-fluid, also div can have 12 total grids. for ex
<div class="container">
<div class="row" id="bodyDiv" data-controller="orglist">
<div class="col-md-12">...</div>
</div>
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
</div>...
</div>
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Please refer:- http://getbootstrap.com/css/
I am having a go at Twitter Bootstrap 3 for the first time and seem to be getting stuck when it comes to the grid system.
I am ok when it comes to using rows but I am trying to achieve a simple layout like the below image..
I can't even work out how to begin! Does anybody have a link to a jsfiddle or similar I can have a look at to read up on?
Use this structure:
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
</div>
Essentially you create two columns, and in the second column you are creating a new grid to hold your four cells. You can change the md in col-md-6 to break at the resolution you need.
jsFiddle example
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)
I am trying to convert my non responsive site to responsive using bootstrap. I am starting with the top banner. It is 1000px * 400 px. It has a login link on top right. Below that on the left there is a site title saying(my website title: slogan). And below that on the right there is search. I am able to implement it but confused about how to do it. My site is fixed container 1024px.
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">Login links</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:left;">Site banner title</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">search box</p>
</div>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
I have few doubts? Like is it okay to give three rows directly inside one row or should
I give an intermediate col-md-12 like given above?
Is this code the right way to do what I am trying to achieve or is there a better way and is this correct from
bootstrap rules.. I am new to bootstrap and I feel guilty I am not abiding by rules.
Like I mentioned in the comment, your nesting is correct but may be extraneous.
Simplified Markup
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="clearfix">
<p class="pull-right">Login links</p>
</div>
<div class="clearfix">
<p class="pull-left">Site banner title</p>
</div>
<div class="clearfix">
<p class="pull-right">search box</p>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
To answer your question in the above comment:
is it necessary for col-md-* inside every row to add up to 12?
That is almost correct, the sum of col-md-* should not exceed 12 within a row in order to maintain the desired column layout on medium device resolution.
Note about offsets:
if you're using col-*-offset-*, make sure the sums of the cols and offsets does not exceed 12 within a row.
I have to create the following html, tried to use a div for the "last 24 hours" and "last month" and other divs with float left for other stuff, but it turned out all messed up.
please help me, what structure should use? table? divs? thks
This begs to be a grid. I'd use divs with some ready made grid, like the one from Bootstrap.
So for example it could look like this:
<div class="container">
<div class="row">
<div class="span6">LAST 24 HOURS</div>
<div class="span6">LAST MONTH</div>
</div>
<div class="row">
<div class="span6">283</div>
<div class="span6">put a nested grid here</div>
</div>
<div class="row">
<div class="span3">Facebook<div class="value">10%</div></div>
<div class="span3">Twitter<div class="value">9%</div></div>
<div class="span3">Foursquare<div class="value">7%</div></div>
<div class="span3">Others<div class="value">5%</div></div>
</div>
</div>
Then add some css classes and use that to float, change font sizes, colors, etc.