How can I horizontally align two columns at col-sm but stack them vertically at col-xs?
I currently have:
<div class="col-md-3 col-sm-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-12">Content</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-12">Content</div>
</div>
</div>
Something like
<div class="row">
<div class="col-sm-6 col-xs-12">Content</div>
<div class="col-sm-6 col-xs-12">Content</div>
</div>
Bootply : http://www.bootply.com/u6mMtQvyzX
For Claire :
You don't need this row divs...
<div class="col-md-3 col-sm-12">
<!-- <div class="row"> -->
<div class="col-xs-12 col-sm-6 col-md-12">Content</div>
<!-- </div> -->
<!-- <div class="row"> -->
<div class="col-xs-12 col-sm-6 col-md-12">Content</div>
<!-- </div> -->
</div>
Related
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
Im using bootstrap. Need to place two cards of equal row-height. Each card is placed inside col-xs-6. Card contains text and buttons. When i use col-height col-xs-6 card both the card join together. Could be please help me on this.
<div class="row">
<div class="row-height">
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
</div>
<div class="col-height col-middle col-xs-6 card">
<div class="row">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
Is that you want?
.row should be wrapped into .container
.card {
border: 1px solid black;
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row-height">
<div class="row">
<div class="col-height col-middle col-xs-5 pull-left card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Login</h3>
</div>
<div class="col-xs-12 text-center">
Login!
</div>
</div>
<div class="col-height col-middle col-xs-5 pull-right card">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">Sign UP</h3>
</div>
<div class="col-xs-12 text-center">
Sign Up!
</div>
</div>
</div>
</div>
</div>
I have two rows of three columns that I have set up with Twitter Bootstrap like so:
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
This works fine for a certain pixel width (two rows of three nice columns), but when I reduce the screen size, it has 2 in one row, and then 1 on another row (for 1 row). And then when an iPhone screen size they are each in their own row, but they are off center.
How do I make it so that these rows are responsive so that, when the screen size is reduced, 2 columns are displayed as 50% of the container width? And then when the screen is reduced to a phone device width, each column takes up 100% of the container width.
See Example:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
Please try this,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
use phone size css instead of desktop so it will remain same on all screen sizes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
I am working on a grid layout for a website using bootstrap framework. I want a grid that displays 2 stacking divs that span the width of col-lg-4 next to one large div that spans the width of col-lg-8 and is equal in height to the two stacking div's.
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding">
<div class="wadels_dark">
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding">
<div class="wadels_embroidery">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding">
<div class="wadels_white">
</div>
</div>
</div><!--end of row-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
Here is a jsfiddle to help illustrate. My issue is that I do not know how to force the two col-lg-4 divs to stack on top of each other. Instead of stacking the second div simply starts a new row. http://jsfiddle.net/Dinkledine/0w2fppx6/
desire result
thanks for your help
Here is my solution with panel and col layout.If you need padding remove nopadding from class
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
</style>
</head>
<body>
<div class="container-fluid row-offcanvas nopadding">
<div class="col-sm-5 nopadding">
<!--Content 1-->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightblue;"></div>
</div>
</div><!--Content 1 Ends-->
<!--Content 2-->
<div class="col-sm-12 col-md-12 nopadding" >
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 2 Ends-->
</div>
<div class="col-sm-7 nopadding">
<!--Content 3 -->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div>
<div class="panel-body" style="height:602px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 3 Ends -->
</div>
</div> <!--row-->
</body>
</html>
I dont think this is best solution but check it out http://jsfiddle.net/b4voqjud/2/
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
And if you want those two colums to always be same height i don't think you can do that with bootstrap and you have to use javascript, or flexbox, or just adjust padding on different device sizes
You could do something like this :
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
Remember that rows are 12 column based so you think about the bigger layout.
You initially split your screen the way you want ( 4 + 8 ) , inside of those is where the magic happens !
Since a 12 col wide div is occupying the whole space ( it could be a container or any sized div ), the next div will stack below it.
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