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.
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
This is the HTML that I am working within. (PLEASE NOTE: I cannot change the HTML, only the styling).
<div class="table">
<div class="table-row">
<div class="table-row-1">
<div class="table-row-2">
<div class="table-col">Column 1</div>
<div class="table-col">Column 2</div>
</div>
</div>
<div class="table-row-1">
<div class="table-row-2">
<div class="table-col">Column 1</div>
<div class="table-col">Column 2</div>
</div>
</div>
</div>
<div class="table-row">
<div class="table-row-1a">
<div class="table-row-2">
<div class="table-col">Column 1</div>
<div class="table-col">Column 2</div>
</div>
</div>
<div class="table-row-1b">
<div class="table-row-2">
<div class="table-col">Column 1</div>
<div class="table-col">Column 2</div>
</div>
</div>
</div>
</div>
As you can see, there are multiple rows containing the actual cells. I am applying display:table to the main div, display:table-row to the first parent row, and then display:table-cell to the column cells.
I am unable to use an actual table as I cannot change the HTML.
I am unsure what to apply to the extra row containers to ensure that they aren't affecting the structure of the table.
This code is being used to make a flexbox grid which is more structured on larger screens, meaning that the cells within the same column are the same width. If you could suggest another solution other than the table displays, please do, but I have been unable to find another option.
I am working with less.
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>
Does Twitter Bootstrap not support inverting columns in their grid? Similar to the .pull_4 and .push_4 in 960.gs? I see they have offset4 which works like push_4, but no way to pull columns left?
<div class="row">
<div class="span8 offset4">Content in Column 2</div>
<div class="span4">Sidebar in Column 1</div>
</div>
Update
I still can't figure out how to do this. I tried the following, but margins get all messed up...
<div class="row-fluid">
<div class="span8 pull-right" style="background:red">
Right column, First in HTML
</div>
<div class="span4" style="background:green">
Lef column, Second in HTML
</div>
</div>
You can use pull-right or pull-left; see below:
<div class="row">
<div class="span8">Content in Column 2</div>
<div class="span4 pull-right">Sidebar in Column 1</div>
</div>