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
Related
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>
I've tried many ways to code but none of them works. The 3 products are listed vertically in one column. But I have no idea on how to separate the the following <div> containing 6 others product into different columns beside it. Can you help me to solve this?
Or, in other ways, can the <div> is actually aligned into 3 products per row, not in column?
<div class="products-right-grids-position1">
<h4>BUN BOY Bakery</h4>
<p>Best Bakery in Town </p>
<p> </p>
</div>
</div>
</div>
<div class="products-right-grids-bottom">
<div class="col-md-4 products-right-grids-bottom-grid">
<?php
echo getPros();
?>
<?php
echo getBreadPros();
?>
</div>
<div class="clearfix"> </div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width: 100px">
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
I have a form that contains several rows, but one of them is disappearing.
The source code looks like this:
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
As far as I can tell this code looks fine, but this is what it turns into when it gets displayed.
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
<h1>thing2</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
...
</div>
</div>
This makes thing1 and thing2 appear together and not on their own row, and I have no idea why.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row"><!--works fine-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2">
...
</div>
<div class="col-xs-12 col-lg-2 col-md-2 col-sm-2"><!--this div contains thing2-->
<h1>thing1</h1>
</div>
</div>
<div class="row"><!--this row dissapears-->
<div class="col-xs-12 col-lg-6 col-md-6 col-sm-6"><!--this div is gone-->
<h1>Row that disappears.</h1>
</div>
<div class="col-xs-12 col-lg-3 col-md-3 col-sm-3">
</div>
</div>
<div class="row"><!--works fine-->
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
Last Row
</div>
</div>
The code doesn't seem to have any problem #Trevor. I just implemented it and it works well according to me. Let me know if i have misinterpreted your problem.
This code works fine. please check your css file or bootstrap library.
please use bootstrap cdn link.
Turns out my issue was not bootstrap at all. Thanks everyone for mentioning you can't reproduce it, made me dig deeper. The issue turns out to be what was in the div. It was an angular select element with a self closing tag. Changing it to a normal closing tag fixed everything. I excluded it because I thought it was not important and didn't verify before posting.
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/
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