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/
Related
Currently I am structuring the HTMl on my page as follows:
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container-2">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
There are 6 divs outside of the actual content on each section. The outer column is to be a container of a certain colour, and the inner container is only fill up 8/12 of the outer container. This produces margins with the background colour of the outer container of width 2 on either side of the inner column.
This looks great and is responsive. However, I'm wondering if having this many divs is good practice or not?
Well, I guess it's up to you. If you feel like you can manage this many div's then it's fine. But what you have to think about is, if you for instance would pass on your project to another developer, then he would need to understand your work without cleaning up before he even starts, so it's always important to have that in mind when you develop.
I would maybe construct it this way:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="content"></div>
</div>
</div>
</div>
This is just what I wan't to do, maybe someone else would do it another way.
I'm working with Bootstrap 3.0 and I need one row with three elements. I want one fixed at the center and other two at the left and right sides. The following code shows what I have. This works, but it makes three rows.
<div class="row-centered">
<span class="text-left">text</span>
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
<div class="text-right">text</div>
</div>
You could use <div class="row"> and <div class="col-sm-4"> (where "col-sm-4" is interchangable with classes like "col-sm-3", "col-md-4", etc.) to put elements in-line on the same row - here's a JSFiddle.
<div class="row">
<div class="col-xs-4 text-right">text</div>
<div class="col-xs-4" style="background-color:#ccc;">...</div>
<div class="col-xs-4 text-left">text</div>
</div>
try using a tradition row and take advantage of the Bootstrap Grid. Static widths are a bad idea but if you told me specifically what width you are looking to achieve we can better suit it with a column size.
<div class="row">
<div class="col-xs-4 text-left">text</div>
<div class="col-xs-4 text-center" style="background-color:#CCC;">...</div>
<div class="col-xs-4 text-right">text</div>
</div>
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
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
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.