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.
Related
I can do this layout in normal CSS using flex and grid, But I need to know how to do this using bootstrap 4, There is nothing left to try .
<div class="row">
<div class="col-sm-3 bg-success" style="height:500px">d</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6 bg-primary" style="height:250px">d</div>
<div class="col-sm-6 bg-info" style="height:500px">d</div>
</div>
<div class="row">
<div class="col-sm-6 bg-info" style="height:250px">z</div>
</div>
</div>
This is what I need to get
The layout is three columns with the center column having 2 rows.
Try this:
<div class="row">
<div class="col-sm bg-success" style="height:500px">d</div>
<div class="col-sm">
<div class="row">
<div class="col-sm-12 bg-primary" style="height:250px">d</div>
</div>
<div class="row">
<div class="col-sm-12 bg-info" style="height:250px">z</div>
</div>
</div>
<div class="col-sm bg-info" style="height:500px">d</div>
</div>
Try this code, Hope it will help you.
<div class="row">
<div class="col-md-3" style="height:100px; background-color:black">d</div>
<div class="col-md-6 ">
<div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
<div class="box mx-auto bg-info" style="height:100px;">b</div>
</div>
<div class="col-md-3 bg-info" style="height:100px">z</div>
</div>
I divided the one row into 3 columns, both side boxes has a size of 3 and mid box have a size of 6 then check the class col-auto-p2 & box mx-auto.
Please try this one with Bootstrap 4
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
<div class="col-md-6">
<div class="row h-100">
<div class="col-12 h-50" style="padding-bottom: 10%;">
<div class="bg-info h-100">
</div>
</div>
<div class="col-12 h-50" style="padding-top: 10%;">
<div class="bg-info h-100">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="bg-success" style="height:500px">
</div>
</div>
</div>
</div>
You can change the padding on inner columns. Don't forget to put row inside a container or container-fluid as described here
https://getbootstrap.com/docs/4.2/layout/grid/
Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
Please check the working snippet will help you
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
<div class="row" style="position:relative;height:500px;">
<div class="col-sm-12 bg-primary" style="height:200px">d</div>
<div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
</div>
</div>
<div class="col-sm-4 bg-info" style="height:500px">z</div>
</div>
This question already has answers here:
bootstrap grid uneven columns
(4 answers)
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 4 years ago.
I am using bootstrap for my web application.I want my divs to be displayed as below:
my html is as follows:
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<!-content-->
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
But the output displayed is as follows:
How can i change the html so that it can be displayed in the required format
To achieve that you should right row column inside column try this
<div class="container border border-primary">
<div class="row border border-primary">
<div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
<div class="row border border-secondary">
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 1-->
</div>
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 2-->
</div>
</div>
</div>
<div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
<!-content for 3-->
</div>
</div>
You need to check that your col's add up to 12, looks like some of your responsive selectors such as col-md-12 were causing the issue. Here's a working demo:
.col-4, .col-8 > .row{border: 3px solid black; padding: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-8">
<div class="row">
<!--content-->
col-8
</div>
<div class="row">
<!--content-->
col-8
</div>
</div>
<div class="col-4">
<div class="row">
col-4
</div>
</div>
</div>
Please refer to the Bootstrap docs on Grid System for more info
div {
border: 1px solid #3d3d3d;
padding: 5px;
}
// Dont consider this css
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">col-md-12</div>
<div class="col-md-12">col-md-12</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
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>
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>
I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)
The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>