Next to each other I have 3 div with classes like these:
<div class="col-sm-12 col-md-4"></div>
How can I add left and right margins between these divs? If I add it manually, like margin-left or right 15px, it will break the row and the divs will not be next to each other.
As commented earlier:
Try col-md instead col-md-4
with mx-md-x to set/remove the margin. ressource from BS4 : https://getbootstrap.com/docs/4.5/layout/grid/ & https://getbootstrap.com/docs/4.5/utilities/spacing/
demo:
.row>div {
border: solid;
}
.bg-warning>div:after {
content: ', no margins avalaible';
}
.col-md:after {
content: ', margin avalaible.';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row bg-warning text-dark">
<div class="col-sm-12 col-md-4">1</div>
<div class="col-sm-12 col-md-4">2</div>
<div class="col-sm-12 col-md-4">3</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md bg-success text-warning">1</div>
<div class="col-sm-12 col-md mx-md-2 bg-success text-warning">2</div>
<div class="col-sm-12 col-md bg-success text-warning">3</div>
</div>
</div>
Related
I am working on writing the html for the above image with responsiveness. Below is my code for the design so far
HTML:
<div class="container-fluid">
<div
class="row low-height box border bg-light justify-content-start align-content-start overflow-box"
>
<div class="col-1 border bg-primary small-box m-2"></div>
<div class="col-1 border bg-primary small-box m-2"></div>
</div>
<div
class="row low-height box border bg-light justify-content-end align-content-end"
>
<div class="col-1 border small-box bg-success m-1"></div>
</div>
<div
class="row low-height box border bg-light justify-content-center align-content-center"
>
<div class="col-lg-12 text-center"><h4>Title</h4></div>
</div>
</div>
CSS:
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
Problem:
For the browser height lower than 600px, the 3 main sections should become horizontally arranged as shown in the below image.
This is the part I am unable to solve and cant find anything on the bootstrap site as well. May be I am doing something wrong fundamentally. Please help.
You can add a media query in your css,
#media(max-height:600px) {
//here you can write your custom css for that condition
//in this case,
[class*="col"]{
width:33%!important;
}
}
Here's an example
#media(max-height:600px) {
[class*="col"]{
width:33%!important;
}
}
.box {
text-align:center;
padding:5rem;
background-color: #22ccff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="px-lg-12 px-md-12 px-sm-12">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-1
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-2
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 mb-4">
<div class="box">Box-3
</div>
</div>
</div>
</div>
</div>
Instead of putting each of the three grey boxes in its own row, they should be cols within a responsive Boostrap grid.
I've updated your code to put each of those grey boxes in a <div class="col-4 col-sm-12" ...> to make them format to 3 columns on XS screens, and 1 column on all larger size screens per your request. (Although that's backwards from how responsive sites usually work: usually on the smallest screen size the grid collapses to one column, and on larger sizes the grid expands to more columns.)
.box {
height: 200px;
margin-bottom: 10px;
}
.small-box {
height: 100px;
}
.overflow-box {
overflow: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-start align-content-start overflow-box">
<div class="row">
<div class="col-1 border bg-primary small-box m-2"></div>
<div class="col-1 border bg-primary small-box m-2"></div>
</div>
</div>
<div class="col-4 col-sm-12 low-height box border bg-light">
<div class="row justify-content-end align-content-end">
<div class="col-1 border small-box bg-success m-1"></div>
</div>
</div>
<div class="col-4 col-sm-12 low-height box border bg-light justify-content-center align-content-center">
<div class="row">
<div class="col-lg-12 text-center">
<h4>Title</h4>
</div>
</div>
</div>
</div>
</div>
I'm using bootstrap 4 in my Angular 8 application. In my main page I have two components of size md-5 and md-6 and I want to separate them using offset-md-1. But the offset size is big and I don't want to have that much space between my components. How do I reduce the size of the offset? Will offset-md-0.5 work? Can you suggest any better way other than using bootstrap offset?
This is my code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
Use ml-auto instead of offset-md-1 it works perfect for you.
try this code:
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-xs-12 col-sm-12 col-md-5">
<app-projectstatus></app-projectstatus>
</div>
<div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
<app-upcomingreleases></app-upcomingreleases>
</div>
</div>
</div>
I hope this will works perfect for you.
Note: I Can't understand that how offset-md-1 size is big? the default css property for this class is fixed margin-left: 8.333333%; in bootstrap. you can use this class also but condition is that you do not have to make any kind of changes in col-**-* width.
Thank you...
There is no *-xs-* classes in bootstrap-4. Use col-12 instead.
`col-xs-*` not working in Bootstrap 4
Ther are three ways to add space between columns.
margin-x on .col-*
padding-x on .col-*
justify-content-between on .row
Margin is quite tricky since it affects the sum of width of total columns. The width + margin-x of the two columns should not exceed the width of .row. Otherwise, the columns breaks.
The total width of the two columns on md-screen is 91.667%. So you have 8.333% free sapce. You can control where to use this 8.333%.
offset-md-1,mr-auto, ml-auto and justify-content-between yeilds the same result: 8.333% space betwen the two columns.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 offset-md-1 bg-danger ">
offset-md-1
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 mr-auto bg-primary">
mr-auto
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
ml-auto
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between">
<div class="container1 col-12 col-md-6 bg-primary">
justify-content-between
</div>
<div class="container2 col-12 col-md-5 bg-danger ">
justify-content-between
</div>
</div>
</div>
If you want to have 8.333% / 2 space betwen them. You can not do it in bootstrap-4. So you need to use css.
#media (min-width: 768px) {
.ml-md-0_5 {
margin-left: calc((100% / 12) / 2)
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid padding">
<div class="row">
<div class="container1 col-12 col-md-6 bg-primary">
</div>
<div class="container2 col-12 col-md-5 bg-danger ml-md-0_5">
ml-md-0_5
</div>
</div>
</div>
Now, the total width + margin of both of the columns is 95.833%. By default, the elements are left aligned. Therefore, 4.166% free sapce on the right side of the last column. You can use it on x-side of any of the columns if you wish so.
As said before, you can use padding-x also which i prefer because it does not affect the total width of the columns.
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>
I am trying to make a responsive web-layout like :
Upon resizing I would want the skills to be next to one another underneath the intro:
The problem is mainly at the intro and skill boxes, I can't seem to get them to adjust the way I want: https://jsfiddle.net/aq9Laaew/20858/
HTML:
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col">
INTRO
</div>
<div class="col p-0">
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
<div class="col m-0">SKILLS</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
They keep setting underneath each other which i only want when the screen is extra small. this is simple but i just cant figure it out...
I tried adding col-4 for intro (since intro should expand wider than skill) and messed with the columns more on the skill box to no luck..
There are a few issues that are preventing you from getting the desired layout:
cols must be the immediate child of a row ... the skills need to be wrapped in another row.
Use col-sm to allow columns to stack vertically on the smaller layout.
Don't adjust margins on the rows or cols as it will break the way the grid works.
Working demo: https://www.codeply.com/go/0g48AjUW4E
<div class="container">
<div class="row">
<div class="col p-0 text-center">HEAD</div>
</div>
<div class="row">
<div class="col-sm p-0">
INTRO
</div>
<div class="col-md-auto p-0">
<div class="row no-gutters">
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
<div class="col col-sm col-md-12">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col p-0">
ED
</div>
<div class="col p-0">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col p-0">OTHER</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
}
.col,.col-sm {
border: solid 1px #6c757d;
}
First, when you separate into multiple cols you should wrap them inside a row ( so you have display:flex )
Second, you need to add classes to your columns to set how you want them to appear on different screen sizes. Note that as of bootstrap4 col-xs does not exist. Use col simple instead and overwrite it on larger screens.
In the example below i have used:
col-lg-8 and col-12 on the INTRO section.
col-lg-4 and col-12 on the Skills column wrapper.
col-lg-12 and col-4 on the Skills columns.
Also added a row to wrap the Skills columns
See below or jsFIddle
.row {
background: #f8f9fa;
margin: 10px;
}
[class*="col-"] {
border: solid 1px #6c757d;
}
.row,
[class*="col-"] {
min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<div class="row">
<div class="col-lg-8 col-12">
INTRO
</div>
<div class="col-lg-4 col-12 p-0">
<div class="row mx-0">
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
<div class="col-lg-12 col-4 m-0">SKILLS</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
You need to wrap skill boxes in a div and give it classes d-flex
flex-wrap
By doing this, you will get the result without giving negative margin
col-md-8 col-sm-12 classes in intro div will make it 100% for
smaller device
No need to make any css changes
.row {
background: #f8f9fa;
margin:10px;
}
.col {
border: solid 1px #6c757d;
margin: 10px;
}
.row, .col {
min-width: 120px;
}
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col text-center">HEAD</div>
</div>
<!-- Changes here -->
<div class="row">
<div class="col-md-8 col-sm-12">
INTRO
</div>
<div class="col p-0">
<div class="d-flex flex-wrap">
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
<div class="col-4 col-md-12 m-0">SKILLS</div>
</div>
</div>
</div>
<!-- Changes Ends here -->
<div class="row">
<div class="col">
EDUCATION
</div>
<div class="col">
EXPERIENCE
</div>
</div>
<div class="row">
<div class="col">OTHER</div>
</div>
</div>
I would use a media query for this.
https://www.w3schools.com/css/css3_mediaqueries.asp
That is, keep your layout how you want it now as it is, then in the media query, just rearrange the layout to what you want it become on screen re-size.
My whole code is this how to set spacing b/w the divs ?It must run smoothly on all devices
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#003380;"></div>
<div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</body>
You could wrap another column around the elements, which makes that the padding of the wrapping column provides some sort of margin/spacing.
Is the below code something you are aiming for?
.spacing {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380;"></div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</div>
</body>
EDIT:
Since you are looking for spacing in all directions (and not only left and right), you can just add an extra class to the wrappers called spacing and the following CSS: (see updated code snippet)
.spacing {
padding: 15px;
}
There are multiple ways to achieve that:
By wrapping your each col with another col
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12" style="height:100%;background-color:#003380;"></div></div>
<div class="col-xs-6"><div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff"></div></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff">left</div></div>
<div class="col-xs-6"><div class="col-xs-12 " style="height:100%;background-color:#66a3ff">Center</div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#003380">Right </div></div>
</div>
</div>
</body>
This will create default space of 30px between two column
If you wish to create more space then you can use col-xs-offset classes from bootstrap. But this will decrease the size of your columns
You can always use custom classes of your own to change the grid as you want
Easiest would be using a flexbox for the row and padding for the flex items.
.row {
display: flex;
justify-content: space-between;
}
.row div { padding: 1em; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:100%">
<div class="row">
<div class="col-xs-3" style="background-color:#003380;">X</div>
<div class="col-xs-6 text-center" style="background-color:#66a3ff;">Top </div>
<div class="col-xs-3 " style="background-color:#cce0ff">X</div>
</div>
<div class="row">
<div class="col-xs-3" style="background-color:#66a3ff">X</div>
</div>
<div class="row">
<div class="col-xs-3 " style="background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="background-color:#003380">Right </div>
</div>
</div>
#Aviral Garg Please check following code. I have modified style properties in your code and added classes "common_row" & "common_box" in it, with some properties. You can adjust padding in "common_box" class & margin-bootom in "common_row" class according to your need. It will work fine on all devices as I have added grid classes in it. I hope you were expecting the same.
.common_row{
height:33%;
margin-bottom:10px;
}
.common_row .common_box{
padding:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:100%">
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380;"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center common_box"style="background-color:#66a3ff;">Top </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="background-color:#cce0ff"></div>
</div>
<div class="row common_row" style="height:33%">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#66a3ff"></div>
</div>
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#cce0ff">left</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 common_box" style="background-color:#66a3ff">Center</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380">Right </div>
</div>
</div>
If I am right, you want spacing between the divs of class row without a spacing between the container div and its child divs(div.row).
For this you can add bottom margins to all divs except the last div. This can be done as so:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
If you want to have spacing between the childs of rows too:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
div.col-xs-3{
margin: [top margin], 0, [bottom margin], 0;
}
div.col-xs-6{
margin: [topmargin], 0, [bottom margin], 0;
}
Try adding this class to your stylesheet
Pad-10{
padding:1%;
}
and then add the class to your divs
<div class="row Pad-10" style="height:33%">