How do I center a row in Bootstrap? - html

Question

I just need to know how to center the row with the columns titled, 'Hire Safely & Quickly' and 'No Staffing Agencies'. Please disregard the rest of the site as it's unfinished. Code is below, link to the dev website is here: http://staging.liberationmedical.com/new-design/
<div class="container-fluid firstcontainer" style="margin-top: 150px;">
<div class="row row-centered">
<div class="col-md-6">
<h2>Hire Safely & Quickly</h2>
<p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p>
<p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
</div><!-- col-md-3 -->
<div class="col-md-6">
<h2>No Staffing Agencies</h2>
<p class="icon-text3">With Liberation Medical, you'll be able to engage<br>directly with contract medical professionals,
avoid<br>staffing agency fees, and evade miscommunication<br>and mis- representation. Post unlimited jobs and<br>have unlimited contracts for free!</p>
<p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
</div><!-- end col-md-3 -->
</div><!-- end row -->
</div><!-- end container-fluid -->

Answer 1

If you are familar with CSS you can edit the corresponding tag in your CSS-File. Have a look here: http://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 2

First of all, your text inside your <p> tags have line breaks in it <br> which is causing your content to not fill in the entire col-md-6 and therefore giving the page a false sense of width. I would find the column width that will suit the width of your content and then offset them to center them in the page. You could do:
<div class="container-fluid firstcontainer" style="margin-top: 150px;">
<div class="row row-centered">
<div class="col-md-3 col-md-offset-3">
<h2>Hire Safely & Quickly</h2>
<p class="icon-text1">Only credentialed professionals can use Liberation<br>Medical. As a member, you can review profiles, skills<br>and job bids and select candidates; you can hire<br>locum tenens, nurses and other contract medical<br>professionals.</p>
<p class="icon-text4-subtext"><a class="links" href="#">Sign up for free</a></p>
</div><!-- col-md-3 -->
<div class="col-md-3 col-md-offset-3">
<h2>No Staffing Agencies</h2>
<p class="icon-text3">With Liberation Medical, you'll be able to engage<br> directly with contract medical professionals, avoid<br>staffing agency fees, and evade miscommunication<br> and mis-representation. Post unlimited jobs and<br>have unlimited contracts for free!
</p>
<p class="icon-text4-subtext">
<a class="links" href="#">Sign up for free</a>
</p>
</div><!-- end col-md-3 -->
</div><!-- end row -->
This should move your columns closer together and also more to the center of the page. You can play around with the offsets and column widths to get it to your liking. Just remember, 12 total columns including offsets.
One other thing that I do is to create a class called center so that I can apply that class to any element I want to make everything centered.
Like this:
.center{text-align:center;}

Answer 3

there is no center class in bootstrap like zurb foundation. you can use .md-offset-3 to center it