Menu
I have a question about how to put stuff vertical in a grid system with bootstrap.
Here is what I'm trying to do:
first, the screen should be devided in two part horinzontally, left part 8, right part 4.
then, the left part should be devided again vertically, on the top side there will be a table in it.
on the bottom part, again devided in 2 horizontally ane in each part a panel will be shown.
[![1]](https://i.imgur.com/JGhJiEq.jpg)
How do I do the vertical part?
<div class="row">
<div class="col-md-8" id="leftside">
?
?
?
</div>
<div class="col-md-4" id="rightside">
...
</div>
504
You can get the 5 colums to wrap within the same . row using a clearfix break such as <div class="col-12"></div> or <div class="w-100"></div> every 5 columns. As of Bootstrap 4.4, you can also use the row-cols-5 class on the row ... Save this answer.
Bootstrap uses a 12-column grid system that can update itself responsively based on screen size. There are only 38 highly composite numbers below the one million threshold, including 120, 2520, 5040, 55440 and 720720.
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint). You can use predefined grid classes (like . col-4 ) or Sass mixins for more semantic markup.
Check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-8" style="height:500px;background-color:green;">
<div class="row" style="height:50%;background-color:red;">
<div class="col-md-12">
<p>A</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>B</p>
</div>
<div class="col-lg-6" >
<p>C</p>
</div>
</div>
</div>
<div class="col-md-4" style="height:500px;background-color:black">
</div>
</div>
</body>
</html>
Codepen:http://codepen.io/anon/pen/dYVxGa
119
<div class="row">
<div class="col-md-8"> <!-- leftside -->
<div class="row">
<div class="col-md-12" style="background-color:blue;">table</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:yellow;">panel1</div>
<div class="col-md-6" style="background-color:green;">panel2</div>
</div>
</div>
<div class="col-md-4" style="background-color:red;height:40px">rightside</div> <!-- rightside -->
</div>
<hr>
<!-- code without bg-color -->
<div class="row">
<div class="col-md-8"> <!-- leftside -->
<div class="row">
<div class="col-md-12">table</div>
</div>
<div class="row">
<div class="col-md-6">panel1</div>
<div class="col-md-6">panel2</div>
</div>
</div>
<div class="col-md-4" style="height:40px">rightside</div> <!-- rightside -->
</div>
Note: Make sure that you will have to give custom height to "rightside" column.
Codepen: https://codepen.io/AnoNewb/pen/zjebGb
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
