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>
Related
I am trying to make bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?
Here is my current code, not having any luck:
<div class="row row-cols-5">
<div class="col col-xs-6">
R1
</div>
<div class="col col-xs-6">
R2
</div>
<div class="col col-xs-6">
R3
</div>
<div class="col col-xs-6">
R4
</div>
<div class="col col-xs-6">
R5
</div>
</div>
How do I do this properly? Thanks!
<div class="row row-cols-lg-5">
<div class="col-md-4 col-sm-6 col-6">
1
</div>
<div class="col-md-4 col-sm-6 col-6">
2
</div>
<div class="col-md-4 col-sm-6 col-6">
3
</div>
<div class="col-md-4 col-sm-6 col-6">
4
</div>
<div class="col-md-4 col-sm-6 col-6">
5
</div>
</div>
I think you can do like this.
<div class="row row-cols-lg-5">
<div class="col-md-4 col-sm-6 col-6">
1
</div>
<div class="col-md-4 col-sm-6 col-6">
2
</div>
<div class="col-md-4 col-sm-6 col-6">
3
</div>
<div class="col-md-4 col-sm-6 col-6">
4
</div>
<div class="col-md-4 col-sm-6 col-6">
5
</div>
</div>
For more about bootstrap grid, please see bootstrap grid.
I have a bootstrap grid layout with ads, and I needed to add a banners row in it. I found a way to do it by adding a container between ads and the banners inside them with a separate row. But now I have a problem that you can see in the picture.
Is there a way to have the ads positioned better and avoid un-used empty space?
Note1: The columns number is responsible to screen size.
Note2: Banners number in a row is responsible for columns number (with d-none trick)
<div class="container">
<div class="row">
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="container">
<div class="row">
<div class="col-3 banner">Banner</div>
<div class="col-3 banner">Banner</div>
<div class="col-3 banner d-sm-none d-md-block">Banner</div>
<div class="col-3 banner d-sm-none d-md-block">Banner</div>
</div>
</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
<div class="col-6 col-md-3 col-lg-3 ad">Ad</div>
</div>
</div>
As your are using 4 columns in each row, you need put ad columns in a separate row. Bootstrap grid system works on 12 column layout. So each row must have columns that sums up to 12. You can have any combination of columns such as .col-md-4, .col-md-4 and .col-md-4 in one row.
No need to take separate container for ad banners.
Try below code.
<div class="container">
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
<!-- Ad banners-->
<div class="row">
<div class="col-3 banner">Ad banner</div>
<div class="col-3 banner">Ad banner</div>
<div class="col-3 banner">Ad banner</div>
</div>
<div class="row">
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
<div class="col-md-3 ad">Col-1</div>
</div>
</div>
With this code when the width of the container is less than 792px the content of the div with the class 'col-xs-6' disappear.
<div class="cont">
<div class="top">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
how can I display it?
add class name row to top class
<div class="cont">
<div class="top row">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
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
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