I'm trying to achieve the following in Bootstrap 3 using as little of my own markup and CSS as possible. Ideally I'd like to achieve this using pure Bootstrap Markup without resorting to hacks. I've looked at the documentation but can't see a standardized way....
As you can see below, I'm trying to get two rows with a gap in the center.
My Markup as follows
<section class="row">
<article class="col-sm-12 col-md-6">
<!--ROW LEFT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6">
<!--ROW RIGHT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
</section>
The only similar example Bootstrap has in the Docs is below, but you don't get a gap in the center.
BOOTSTRAPS MARKUP
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
content
</div>
<div class="col-sm-6">
content
</div>
</div>
</div>
</div>
To expand on Skelly's answer, you can use Bootstrap's column offset classes to create gaps between columns:
<div class="container"><section class="row">
<article class="col-sm-12 col-md-5">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-5 col-md-offset-2">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section></div>
http://bootply.com/103191
This prevents having to add extra styles but does create a larger gap as you're using two virtual columns to create the space.
If you don't mind the extra space on the right, you could make the offset 1 instead.
How big do you want the gap?
Using BS cols you could do something like this..
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-5">
content
</div>
<div class="col-sm-1"></div> <div class="col-sm-1"></div>
<div class="col-sm-5">
content
</div>
</div>
</div>
</div>
Demo: http://bootply.com/87117
(or) try to construct with padding:
<section class="row" style="background-color:red;">
<article class="col-sm-12 col-md-6" style="padding-right:30px;">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6" style="padding-left:30px;">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section>
Your gap in red, see: http://bootply.com/87152
Related
I have the following structure
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
box 1
</div>
</div>
<div class="row">
<div class="col-md-12">
box 2
</div>
</div>
</div>
<div class="col-md-4">
box 3
</div>
</div>
</div>
Is there a possibility with bootstrap to easily show the following order on small screens?
|box1|
|box3|
|box2|
I could not figure out how to swap rows in this manner. Thank you
Instead of putting the box column in other row. you can have all the box column in same row. You can achieve the column order in bootstrap using col-sm-push-* or col-sm-pull-* utility.
Check demo here
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="content">
<h1>Column 1</h1>
</div>
</div>
<div class="col-sm-4 col-sm-push-4">
<div class="content">
<h1>Column 3</h1>
</div>
</div>
<div class="col-sm-4 col-sm-pull-4">
<div class="content">
<h1>Column 2</h1>
</div>
</div>
</div>
</div>
I'm working on a template and my code looks something like this. It looks how I want to looks, but I don't know if it's ok technical talking.. Need some tips:
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="srcimg.png" />
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="col-xs-12 no-padding-left">
<h2 class="col-xs-7 no-margin no-padding line-height-product title-product">Ttesta</h2>
<p class="col-xs-5 no-margin dots-product-page line-height-product ">● ● ●</p>
<p class="col-xs-12 no-margin no-padding line-height-product subtitle-product">Xytzadwa </p>
<p class="col-xs-12 no-margin no-padding line-height-product date-product">My test</p>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<img class="col-xs-4 img-responsive" src="/images/icon.png" />
</div>
</div>
</div>
It looks ok, except all of the no-padding will elimnate the normal Bootstrap gutter (space between columns). Also, the nested columns should be wrapped in another row. From the Bootstrap docs
Content should be placed within columns, and only columns may be
immediate children of rows.
The last img shouldn't have col-xs-4. Place it inside a column instead. In general the grid col-* is for block elements like the DIV html tag. It shouldn't be for other elements that have other styles (h2, p, etc..)
<div class="row">
<div class="col-xs-5 padding-box-product-image margin-image-product">
<div class="pic-box-product">
<img class="img-upload img-responsive" src="//placehold.it/900x500">
</div>
</div>
<div class="col-xs-7 width-content-product">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-7"><h2 class="line-height-product title-product">Ttesta</h2></div>
<div class="col-xs-5"><p class="dots-product-page line-height-product ">● ● ●</p></div>
<div class="col-xs-12"><p class="line-height-product subtitle-product">Xytzadwa </p></div>
<div class="col-xs-12"><p class="line-height-product date-product">My test</p></div>
<div class="col-xs-12 decoration decoration-margins-product-first"></div>
<div class="col-xs-4"><img class="img-responsive" src="//placehold.it/70"></div>
</div>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/hOXVBXdb5B
I have a row with four containers, each col-md-6. Is there a way to position the third container such that it occupies the vertical space above it? I could make two columns, but the content of containers 2 and three could get large, so i would like the containers to rearrange based on the most efficient layout.
Bootstrap Columns
```
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
<div class="col-md-6">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
It's a really interesting problem. Pity that you did not write an example of the code. Maybe you should consider to rearrange container on two separate columns (like in the code below) but I hope someone can answer this question better than me.
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content1 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content2 item-content">
...
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 col-sm-12">
<div class="feature-content3 item-content">
...
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="feature-content4 item-content">
...
</div>
</div>
</div>
</div>
</div>
</div>
I have divided my Bootstrap grid columns following way.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="col-md-12">B1</div>
<div class="col-md-12">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="col-md-12">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
Please find below of visual layout of this code.
Is my approach of dividing grid columns correct or wrong?
Always wrap your column inside a row to avoid any css break when resizing/or something like that
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A </div>
<div class="col-md-6">B
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">C </div>
</div>
</div>
You should add row divs for children inside B.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">B1</div>
</div>
<div class="row">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class="row">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
Just add an row div inside B for every line of columns inside: b, b1.1, b1.2 and b2.1, b2.2. This should help.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
A
</div>
<div class="col-md-6">
<div class='row'>
<div class="col-md-12">B1</div>
</div>
<div class='row'>
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
<div class='row'>
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
<div class="col-md-3">
C
</div>
</div>
</div>
You should always wrap your columns inside the row for better layout without spacing in the columns or clearfix for layout with spacing:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">A</div>
<div class="col-md-6">
<div class="clearfix">
<div class="col-md-12">B1</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-8">B1.1</div>
<div class="col-md-4">B1.2</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="col-md-12">
<div class="clearfix">
<div class="col-md-10">B2.1</div>
<div class="col-md-2">B2.2</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">C</div>
</div>
</div>
You might be interested to see this Q/A, Remove padding from columns.
Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?
See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?