Help me, how to set each column same height? I have this structure:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
In this case, the content displayed is as follows:
But when I try to resize the browser window, the content is shifted wrong:
And so should:
How to fix it?
One way would be to add a clearfix that's only visible on the smaller viewports..
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
http://bootply.com/ZDDbPlCraT
create a custom css class in your .css file
.fixed-height {
height: 200px;
}
Then add this to your HTML as follows:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
</div>
</div>
Related
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>
How would i do something like this? http://jsfiddle.net/BxaNN/369/
but with the top column in the center top?
NOTE: this is not my code
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>
The bootstrap classes you have already does this for you. You just need to reference the bootstrap cdn. You could also, center the text to make it pretty. check out the grid system here: Bootstrap Resource
.container {
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</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 am repeating some kind of tiles in a div with class row. It looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
It should look like this: IMAGE
Which basically means that no matter what display size it should always show as many tiles as possible in one row. Currently this does not work on a mobile device for example. Anyone know to fix it?
Is this what you were looking for?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="ccol-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-3" style="margin-bottom:15;">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-6" style="width: auto;">
<div style="position: relative;">
<img src="http://via.placeholder.com/300" />
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-6">
<div class="row">
<div class="col-sm-12">HEADER</h:outputText>
</div>
</div>
<div class="row">
<div class="col-sm-12">TEXT</div>
</div>
<div class="row">
<div class="col-sm-6"><button>stuff</button></div>
</div>
</div>
</div>
</div>
</div>
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