CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-4
cosmichero2025
cosmichero2025

Reputation: 1029

Can't center some text in a Bootstrap row

I am trying to center some text in a row. I feel like this shouldn't be this difficult and I'm confused on why its not working.

Pic(Example)

enter image description here

#title_img {
  background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
  height: 180px;
  width: 180px;
  margin: 0 auto;
}
#title_img_holder {
  padding-top: 5%;
  float: none;
  margin: 0 auto;
}
#title_holder {
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="header_con">
  <div class="container">
    <div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div>
    <div class="row" id="title_holder">
      <h2 class="text-center">We fix screens.
        <small class="text-muted">Not for free though</small>
      </h2>
    </div>
  </div>
</div>

I am using the most current version of boostrap 4

Upvotes: 1

Views: 2286

Answers (2)

Jack Koppa
Jack Koppa

Reputation: 1191

Right now, the display: flex on .title_holder is overriding the ability of your <h2> to fill the full width of its parent automatically. A simple fix would be to set .title_holder h2 { width: 100%; }, and the text content will then be centered.

#title_img {
        background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
        height: 180px;
        width: 180px;
        margin: 0 auto;
    }
    
    #title_img_holder {
        padding-top: 5%;
        float: none; 
        margin: 0 auto;
    }
    
    #title_holder {
        text-align: center;
    }
    
    #title_holder h2 {
        width: 100%;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" id="header_con">
            <div class="container">
                <div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div>
                <div class="row" id="title_holder">
                    <h2 class="text-center">We fix screens.
      <small class="text-muted">Not for free though</small>
    </h2> </div>
            </div>
        </div>

Upvotes: 1

Johannes
Johannes

Reputation: 67738

Add this CSS:

#title_holder h2 {
    margin: 0 auto;
}

(You have to center the h2 inside its parent container)

http://codepen.io/anon/pen/QpqQYq

Upvotes: 5

Related Questions