How to set responsive divs in my case? - html

I want to use col-md-2 for the large pc view and col-xs-12 for tablet view.
My problem is that when I turn to larger width view, I see there are gaps between each div. This doesn't happen in the tablet view.
Html code:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
Jsfiddle link
Can anyone help me about it? Thanks!


You're trying to nest the grid. If you nest the grid you need an additional <div class="row"> between the two column classes to offset the padding.
For example the <div> with the class col-xs-12 col-md-2 has a direct child <div> with class col-xs-3 col-md-12 box1.
Change this from
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
into
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
I've updated your example to add these <div class="row">'s
.box1 {
background-color: grey;
}
.box2 {
background-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>


The gaps are defined in Bootstrap grid settings. Classes with xs-* are all 100% width blocks, so there are no gaps.
If you want to have grid system without gaps on all screen sizes, you need to customize your Bootstrap build - http://getbootstrap.com/customize/

Related

Bootstrap grid not working in small screen size

I want to display two columns display for all screen sizes and the code does not working in small screen size. I use bootstrap grid system and I don't know why it is not working as I excepted.
<div class="app-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body"><!-- stats -->
<div class="row match-height">
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How align horizontal items?

I want to align these elements in mobile view
I want that on mobile devices the images are on top of the text and not on the side.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-6 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-10 items_why">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/destination_expert.png">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/faster.png">
<span>Faster</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/transparent.png">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/cheaper.png">
<span>Cheaper</span>
</div>
</div>
</div>
</div>

The <div>s containing <span>s should be contained in another row so they can be part of another grid within the grid.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-12 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-10">
<div class="row">
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/destination_expert.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/faster.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Faster</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/transparent.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/cheaper.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Cheaper</span>
</div>
</div>
</div>
</div>
</div>
You can try it here: https://www.bootply.com/new

Bootstrap 3 RWD two columns to one column

I have two columns in one row like a
<div class="col-lg-10 col-md-12">
<div class="form-row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="form-row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
And it's look fine on full screen but at rwd and small width rows are broken...
Screens:
http://s4.postimg.org/m0zht42wr/Zrzut_ekranu_2015_08_11_o_13_02_57.png
http://s2.postimg.org/vsujeo1uv/Zrzut_ekranu_2015_08_11_o_13_03_13.png

Might solve it, might not:
Always add the xs size. if it is supposed to be col-12 add it.
<div class="col-xs-12 col-md-12 col-lg-10">
<div class="form-row">
<div class="col-xs-12 col-md-6">
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
<div class="form-row">
<div class="col-xs-12 col-md-6">
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
</div>

How to show padding of the elements in my case?

I asked a responsive question in my previous post.
How to set responsive divs in my case?
I fixed my html to be valid html codes but it seems like I don't have the padding on the left of red column and right of the gray column anymore in tablet view. I think I do have valid bootstrap class but I am not sure what happen. Can someone help me out about this?
My jsFiddle
http://jsfiddle.net/0qarh5yt/6/
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>

You have negative margins on row:
.row {
margin-right: -15px;
margin-left: -15px;
}
if you delete these or set them to 0 it will solve your issue
(everything else is ok);
fiddle

Why is col-sm-push-6 also executed in LG mode?

I have a footer on my website with six content blocks.
Depending on the breakpoints, I want to have them in 1x6, 2x3 or 3x2 format.
Without the push and pull classes, the blocks raster is working well on all breakpoints.
But you can imaging that I want to reorder some blocks if it flips from 3x2 to 2x3 format.
<!-- footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4">
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
</div>
</div>
</div>
In SM mode the reordering works fine.
But in LG mode it is still executing the col-sm-push-6 command because it push the 3th div out of the screen.
Is col-sm-push-6 not SM only?

You have to use col-md-push-0 / col-md-pull-0 to "reset" the push/pull for the other grid sizes..
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
<div class="well"> </div>
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
</div>
</div>
http://www.bootply.com/126837