I want a full width column that should not stack on small devices but stay with the same width. I am using bootstrap 4. This is my code,
<div class="container-fluid">
<div class=""row">
<div class="col-sm-12">
<h1>Welcome back User!</h1>
</div>
</div>
</div>
But when I inspect there is a slight oveflow in small devices. How to fix this?
You can use bootstrap col-12 class or just use a simple div to make it full width everywhere.
Here is the working example using bootstrap col-12 class:
.col-12 {
background-color: #dedede;
}
.content {
background-color: #abaaba;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>Welcome back User!</h1>
</div>
</div>
</div>
<!-- without using bootstrap -->
<div class="content">
<h1>Welcome back User!</h1>
</div>
Related
I picked up Bootstrap 5 today
I'm not able to make a 3 stacked column layout with box-1, box-2 and box-3 on-top of each other take 100vh
I've pasted a redacted version of the code below, it really is three boxes stacked on top of each other. I can do this in CSS Grid and Flexbox but not with Bootstrap.
Here are the methods I've already tried which have not worked:
set body and html to height: 100vh
set container to height 100vh - this makes each box 100vh ora box-1 takes 100vh, box-2 overflows up to another 100vh, likewise box-3
make a wrapper class around the content of the body and set that to height 100vh
repeated 1)-3) with utility class vh-100
Any suggestions please?
Thanks
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<section class="container box-1">
<div class="row">
<div class="col">
</div>
</div>
</section>
<section class="container box-2">
<div class="row">
<div class="col">
</div>
</section>
<section class="container box-3">
<div class="row">
<div class="col">
</div>
</div>
</section>
</body>
Seems to me you can dramatically simplify this. I'm not sure why you'd need rows or columns if there's only ever one of each per container. You don't even seem to need more than one container. Let's just us a basic flex column, per the docs.
/* all styles for demo only */
.d-flex {
background: #eee;
}
.box-1:nth-child(even) {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100 p-0">
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
</div>
</body>
If you do happen to need the containers and inner structure, just move the flex-fill class out to the rows (and just use one container). It'll work the same.
/* all styles for demo only */
.row {
background: #eee;
}
.row:nth-child(even) {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100">
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
</div>
</body>
I have two div columns. I want to display a line between them on the screen.
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
Try this, I hope it'll help you out. Thanks
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-3">
<label>Left Column</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-sm-9 col-md-9 border-left">
<label>Right Column</label>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
You can use the following solution using the border-right from utility classes of Bootstrap 4. But there are no breakpoint classes available on the border utilities. So the border is always visible:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 border-right">Column A</div>
<div class="col-md-9">Column B</div>
</div>
</div>
In case you only want to show the border on a specific breakpoint you can use something like the following (border is only visible on breakpoint md and higher):
.border-right.border-md {
border-right-width:0!important;
}
#media (min-width: 768px) {
.border-right.border-md {
border-right-width:1px!important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 border-right border-md">Column A</div>
<div class="col-md-9">Column B</div>
</div>
</div>
You can also add some custom SCSS code to the Bootstrap SCSS to add the breakpoints to the borders too: https://github.com/twbs/bootstrap/issues/23892
Using Bootstrap and have row which consist of 4 <div>. I need to column which is more them col-xx-1 and less than col-xx-2. How can I set half of col-xx-2 and rest space pass to next div?
<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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
I think you have to create sub columns.
So
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-7"> // Extend the length to combine the two rows
<div class="col-sm-4"> // Gives 1/3 of the 8 length column
THIS ONE IS "COL-SM-1.5ish"
</div>
<div class="col-sm-8"> // Gives 2/3 of the 8 length column.
</div>
</div>
...
I combined the 2 columns together to make it col-sm-7, then did subcolumns within there, that give you more room to work with inside the main column. You can adjust accordingly from there.
Sorry i cant give you a 100% correct answer, i usually just browse for answers, hopefully this helps or guides you in the correct direction.
You can define your own classes on top of bootstrap
Bootstrap uses a 12 column grid. Your total columns need to equal 12. You had 3+2+5+1+1 = 12 originally. Now its 3+1.5+5.5+1+1 = 12
I have converted your original col-sm to col-xs instead, since its easier to read on stackoverflow. The principle is the same
[class*=col]{
box-sizing: border-box;
border: 1px solid black;
}
.col-xs-15,
.col-xs-55 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
#media (min-width: 1px){
.col-xs-15,
.col-xs-55{
float: left;
}
.col-xs-15 {
width: 12.5%;
}
.col-xs-55 {
width: 45.8333333333%;
}
}
<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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-2">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-5">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- With changes -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
first text here
</div>
<div class="col-xs-15">
THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
</div>
<div class="col-xs-55">
third text here
</div>
<div class="col-xs-1">
forth text here
</div>
<div class="col-xs-1">
forth text here
</div>
</div>
</div>
</div>
</div>
I suggest looking at the bootstrap source code to implement your own classes as well
https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css
Simple by giving additional custom class and add it to your media-query
.custom-width{
width:15% !important;
}
Adjust your width in such a way so that it won't overflow your row
.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
border: 1px solid;
}
#media only screen and (min-width: 768px) {
/* Styles */
.custom-width {
width: 15% !important;
}
}
<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.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
first text here
</div>
<div class="col-sm-2 custom-width">
THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
</div>
<div class="col-sm-5">
third text here
</div>
<div class="col-sm-1">
forth text here
</div>
<div class="col-sm-1">
forth text here
</div>
</div>
</div>
</div>
So I've been working on this for the better half of 2 weeks now and can not seem to get this to work out as intended. I'm starting to think that it might be an issue with how deep the rows/columns in question are, but would really like to get some outside insight.
In short, it is the page with -> 2 rows in which the second row contains -> 2 columns in which the second contains -> 3 rows being a breadcrumb, the main content of each page and a footer. Should the page need to extend the nav should remain static. I vaguely recall when starting out seeing some posts of people trying to do a similar layout, but have not been able to find those posts again.
Below is the code in question in as stripped down a form as I could get it:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap and self-made CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- various imports -->
<link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet">
<style>
html, body{
height: 100%;
width: 100%;
}
h2 {
font-family: 'Chivo', sans-serif;
}
</style>
</head>
<body style="background-color: #000;"> <!-- bgc: black -->
<div class="container-fluid h-100">
<div class="row h-25"style="background-color: #F00;"> <!-- bgc: red -->
<div class="col">
<h1>In the header!</h1>
</div>
</div>
<div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green -->
<div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue -->
<nav>
<h2>In the nav bar!</h2>
</nav>
</div>
<div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow -->
<div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white -->
<div class="col">
<main>
<h2>In the breadcrumb!</h2>
</main>
</div>
</div>
<div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan -->
<div class="col">
<main>
<h2>In the main!</h2>
</main>
</div>
</div>
<div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta -->
<div class="col">
<footer>
<h2>In the footer</h2>
</footer>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
My questions are:
1. Can a layout like this even be done in bootstrap4?
2. If it can, what changes are needed to make it work?
3. The "nav column" when collapsing on smaller screens remains at h-100 instead of shrinking, am I using the subclasses correctly for the fluid scaling?
Sorry, I don't have much experience using rows and containers in bootstrap 4, however I can provide you flexbox implementation of such a layout. If you understand flexbox, you can use the below code as reference to create your own layout.
Following is a barebone flexbox code to achieve the layout hierarchy you have mentioned. I realize it's not the best of answers, but hope it helps.
<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column -->
<div class="h-25"> <!-- Row 1 in the container -->
</div>
<div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row -->
<div class="col-sm-2"> <!-- Column 1 of the row -->
</div>
<div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row -->
<div> <!-- Row 1 of the column -->
</div>
<div> <!-- Row 2 of the column -->
</div>
<div> <!-- Row 3 of the column -->
</div>
</div>
</div>
</div>
Refer to boostrap4 flexbox document to understand flexbox https://v4-alpha.getbootstrap.com/utilities/flexbox/:
EDIT
Here's a working plunker : https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview
I have two divs that must be centered using the Bootstrap class text-center (for mobile reasons). After applying this class, the image and text center perfectly. However, I'd like the text to be centered AND left-aligned so that it is precisely in line with the left side of the image.
I've tried a couple of things: first centering the div and then creating a div around the text, and left-aligning the text with text-left. However, the text does not stay centered and moves all the way left of the column. I'd like it to only go as left as the image. If I set a margin with pixels so that the text is left-aligned with the image, then it does not stay responsive and jumps all over the page when it is resized.
Here is an example of the content centered, and an example of what happens when I center it and then left-align the text:
https://jsfiddle.net/wgr165tL/3/
I'd like to find out how to get the text centered but left-aligned only as far as the left of the image. It is necessary to keep the text-center class. Any input would be greatly appreciated.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<h1>Example 1 (Original)</h1>
(want text to align with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
Test Test
</div>
</div>
<h1>Example 2</h1>
(Tried centering and then left-aligning text, but it goes too far left. Ideally it will line up with the left edge of the box)
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575"></div>
<div class="text-left">Test Test</div>
</div>
</div>
</body>
</html>
Another solution is to set some CSS-properties to your "Test Test" div:
In this case add this div-centered class to that div.
A working example :)
.div-centered {
text-align: left;
margin: auto;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<h1>Example 2</h1>
You rock div-centered class!
<div class="row text-center">
<div class="col-sm-1">
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered" >Test Test</div>
</div>
<div class="col-sm-3">
<div><img src="http://via.placeholder.com/200x100"></div>
<div class="div-centered">Test Test</div>
</div>
</div>
Hope it helped :)
Add style="display:inline-block" to line 31, to
<div class="col-sm-3" style="display:inline-block">
You can center the div's by giving equal margins on both sides. Like this:
<div class="row">
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Updated Fiddle. Hope it helps!
Edit:
Just use relevant bootstrap .col-**-** classes.
<div class="row">
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
<div class="col-xs-offset-4 col-xs-4 col-md-offset-0 col-md-4">
<img class="img-responsive" src="http://ep.yimg.com/ca/I/brandsonsale-store_2271_940646575">
Test Test
</div>
</div>
See Fiddle.
Use .col-sm-** if you want it to appear inline in tablets too.
try to delete the "text-center" in <div class="row text-center">
hope it help you..