1

I'm running into the same issue whenever I try the solutions posted to questions that are similar to mine. The header text simply ignores everything. Here is the problem markup; it's a really simple three column row.

<div class="row">
   <div class="col-md-4">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search">Search Here</h3>
   </div>
</div>

Furthermore, here is my CSS, which I have added in on top of the standard Bootstrap CSS.

h3.earnings, h3.register, h3.search {
  text-align: center
}

Regardless of any styling tricks I use, the header text simply remains left-justified within it's parent div column. What am I missing, which would allow me to properly format my layout?

elersong
  • 756
  • 4
  • 12
  • 29

2 Answers2

6

Use text-center as a class next to col-md-4.

eg:

<div class="row">
   <div class="col-md-4 text-center">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4 text-center">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4 text-center">
      <h3 class="search">Search Here</h3>
   </div>
</div>

Or if you just want the h3,

<div class="row">
   <div class="col-md-4">
      <h3 class="events text-center">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register text-center">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search text-center">Search Here</h3>
   </div>
</div>

text-center is built into bootstrap, so you might as well use it. :)

Albzi
  • 15,431
  • 6
  • 46
  • 63
0

I have created a Fiddle here using your code and it is working fine. I guess that problem is that you put your CSS on the top of Bootstrap CSS and it is then overwritten in the remaining Bootstrap CSS. Try putting your CSS after the Bootstrap CSS and see what happens.

HTML:

<div class="row">
   <div class="col-md-4">
      <h3 class="events">Upcoming Events</h3>
   </div>
   <div class="col-md-4">
      <h3 class="register">Signup</h3>
   </div>
   <div class="col-md-4">
      <h3 class="search">Search Here</h3>
   </div>
</div>

CSS:

h3.events, h3.register, h3.search {
  text-align: center
}
Umair Hafeez
  • 407
  • 2
  • 9