having trouble with laying out a fluid column layout in bootstrap 3.
the structure of the HTML elements looks like this:
div.container-fluid
div.row.upperrow
div.row.contentrow
div.col-lg-3
div.col-lg-1
div.col-lg-5
div.col-lg-3
even the first 3 divs, which only add up to 9/12 of the 12-column layout, are much wider than the page. the div.col-lg-5 easily takes up 70% of the row (not 5/12). the div.col-lg-3 is pushed under the first 3 divs as they are too wide.
what could be the problem here?
As stated at http://getbootstrap.com/css/:
Content should be placed within columns, and only columns may be immediate children of rows.
Your layout has a row as child from another row. Put another col-12 in between or remove one row.
Look at this fiddle. Here is how it works.
<div class="container-fluid">
<div class="row">
<p class="text-center">Here is a row</p>
</div><br/>
<div class="row">
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
<div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
<div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
</div>
</diV>
Related
In bootstrap grid, i am unable to get the desired outcome. I have four divs with classes col-sm-3 and as per rule all 4 should display in one line as it is 12 column layout. But it's not. I have also attached the screenshots
Already tried other breakpoints too like xs and md
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-xs-3 col-lg-6">BOX 1</div>
<div class="box2 col-xs-3 col-lg-6">BOX 2</div>
<div class="box3 col-xs-3 col-lg-6">BOX 3</div>
<div class="box4 col-xs-3 col-lg-6">BOX 4</div>
</div>
</div>
In mobile devices all boxes should be in one line
Bootstrap 4 has changed its col-xs class it is now just col- and then the size of the column you want for example:
col-1 col-2 col-3
Note that col-smm col-md and col-lg still work in the way they did in bootstrap 3
Don't use xs in BS4. use sm for anything under 576px.
<div class="testing container">
<div class="row">
<div class="box1 justify-content-center col-3 col-sm-6">BOX 1</div>
<div class="box2 col-3 col-sm-6">BOX 2</div>
<div class="box3 col-3 col-sm-6">BOX 3</div>
<div class="box4 col-3 col-sm-6">BOX 4</div>
</div>
</div>
I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
According to Bootstrap docs:
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.
For example, I have:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
And the last column is behaving what I thought would be incorrect according to the docs. When you resize the viewport in the following example here, you can see that the 7th column has irregular behavior for small viewports. The column seems to fill the width/height of the parent element.
Is there an out-of-the-box way to fix this with bootstrap? Feel like I'm overlooking markup but I'm going cross-eyed at the moment...
I think your problem has to do with the fact the col-*-12 bootstrap classes don't float.
You can either add a float: left to your 7th column with col-sm-12 or you can add a clearfix before the col only visible at the breakpoint where it becomes 12 (sm).
like this:
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
you can see this fiddle
but doing this might be cleaner:
<div class="col-xs-12 col-md-4 pull-left">
Col 7
</div>
here is a demo of that solution.
You can run into a lot of issues when overloading rows, so its usually recommended to avoid it as much as you can and wrap things in .rows.
I have bootstrap grid
<div class="container">
<div class="row">
<div class="col-sm-1">Column 1</div>
<div class="col-sm-2">Column 2</div>
<div class="col-sm-1">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-2">{{Item.Field1}</div>
<div class="col-sm-4">{{Item.Field2}}</div>
<div class="col-sm-6">{{Item.Field3}}</div>
</div>
</div>
</div>
It should display a 3-column grid, instead the columns are displayed as rows. What am I doing wrong?
So your first row is the like the "header" and the next row are the records. Your header is 1-2-1 but your records are 2-4-6 => it won't line up. To keep it from stacking even on small screens you can do col-xs-x instead.
<div class="row">
<div class="col-xs-3">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-3">Column 3</div>
</div>
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-xs-3">{{Item.Field1}</div>
<div class="col-xs-6">{{Item.Field2}}</div>
<div class="col-xs-3">{{Item.Field3}}</div>
</div>
</div>
I'm assuming you want them to always line up. Bet way to do that will be this:
<div class="container">
<div class="row">
<div class="col-sm-2">Column 1<br>
{{Item.Field1}}
</div>
<div class="col-sm-2">Column 2<br>
{{Item.Field2}}</div>
<div class="col-sm-2">Column 3<br>
{{Item.Field3}}</div>
</div>
</div>
Alternatively, you can replace the br and wrap the elements in divs and display: block;
Working example here:
http://www.bootply.com/tb10AKqzM1
Having put in the code myself, it actually does work. It will put in rows when the viewport size is below the small viewing size (so xs, extra small size). If you want to view it on all viewing sizes then you would have to add xs instead of s to all your classes.
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
This is probably is a stupid question but im pretty new to Bootstrap and dont know which is the proper way to fix the following:
I have 5 divs one bellow other ( filled with a pink color ) and another div (filled with a yellow color). There is also a <hr/> line which starts after the div no:5.
What i want to do is to place the yellow div right from the pink ones like on the image bellow:
I have tried to add the yellow div with the length of col-md-10 inside the first row, but it doesnt look like i wanted.
Bootply here.
Any help is appreciated.
Keep in mind that everything needs to be responsive.
Your use or rows is causing this issue. Combine your box's in to a column: DEMO
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-3 col-sm-2">
<div class="box text-center">1</div>
<div class="box text-center">2</div>
<div class="box text-center">3</div>
<div class="box text-center">4</div>
</div>
<div class="col-md-10 col-xs-9 col-sm-10 yellow"> YeLLoW ? </div>
</div>
<hr>
</div>
You need to wrap all lef divs in a .col-md-2 container and the yellow part as you have it, something like
<div class="col-md-2 box col-xs-3 col-sm-2">
<div class="pink">div 1</div>
<div class="pink">div 2</div>
<div class="pink">div 3</div>
<div class="pink">div 4</div>
<div class="pink">div 5</div>
</div>
<div class="col-md-10 box col-xs-9 col-sm-10">
<div class="yellow">yellow part</div>
</div>
The best option is to use the "XS" measure because of, bootstrap is used for mobile first, so that the first measure to take account is the "xs" one and the rest depends on this. I mean that if you put col-xs-12 only, the result for responsive is the same if you put "col-xs-12 col-sm-12 col-md-12, col-lg-12".
For that reason if you want to have the same view as in larger sizes as in smaller sizes you can use like this:
<div class="container">
<div class="row">
<div class="col-xs-2 text-center">
<div class="box text-center">1</div>
<div class="box text-center">2</div>
<div class="box text-center">3</div>
<div class="box text-center">4</div>
</div>
<div class="col-xs-10 yellow"> YeLLoW ? </div>
</div>
<hr>
</div>