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.
Related
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 new to Semantic UI and I'm trying to design a webpage with the layout below. Looking at the documentation, I've decided to use ui page grid. I've also decided to define the top fixed menu outside of the grid.
My first approach was something like this:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="row"> Left column, row 1</div>
<div class="row"> Left column, row 2</div>
<div class="row"> Left column, row 3</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
My question is:
Is it the correct approach to achieve a layout similar to the one of the image ? Should I use segments to divide the content instead of rows or columns ?
Thank you in advance !
Semantic UI wanted segments to mean parts of text/articles. They left a small note:
A segment is used to create a grouping of related content. Horizontal
segments are most effectively used with grids, to allow for text
groups that are aligned across grid rows.
In essence, they mean that grid is the foundation of your markup. The grid has been designed for laying out the page.
You can use segments within your grid to group similar content. (If you look more in the docs, you can see that intention where they have stacked, piled, loading classes for segments.)
For example, I'd like to have the three cells in the bottom left as some sort of news feed. Then I'd use segments there:
<body>
<div class="ui page grid">
<div class="three column row">
<div class="column"> Horizontal section, column 1</div>
<div class="column"> Horizontal section, column 2</div>
<div class="column"> Horizontal section, column 3</div>
</div>
<div class="two column row">
<div class="column">
<div class="ui segment">
<div class="ui vertical segment">
<p>Left column, row 1</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 2</p>
</div>
<div class="ui vertical segment">
<p>Left column, row 3</p>
</div>
</div>
</div>
<div class="column">
<div class="row"> Right column, row 1</div>
<div class="row"> Right column, row 2</div>
</div>
</div>
</div>
</body>
You could use the stretched grid to stretching the segments vertically, so they would have the same height. And use the .ui.segments could help you to keep the code clean. [Online Demo]
CSS
.segment {
min-height: 100px;
}
HTML
<div class="ui horizontal segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div class="ui stretched two column grid">
<div class="column">
<div class="ui vertical segments">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
</div>
<div class="column">
<div class="ui segment"></div>
<div class="ui segment"></div>
</div>
</div>
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>
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>