Twitter Bootstrap Question posted in

How can I vertically center my text within a "col-sm-12" with Bootstrap 4?-Twitter bootstrap

I’m trying to have the text centered vertically within the entire yellow space. I’ve been trying to implement the “align-items-center” onto the row, as suggested in their documentation, as well as the “my-auto” class. I’m not sure what I am doing wrong. 

#heading-cont {
    background-color: #F7CE38;
    height: 10rem;
}

.white {
    color: white;
}

.title {
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

.description {
    font-family: 'Pathway Gothic One', Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid" id="heading-cont">
    <div class="row">
      <div class="col-sm-12 my-auto">
        <h1 class="title white text-center">Digital</h1>
        <h4 class="description white text-center">This is the description.</h4>
      </div>
    </div>
  </div>
</section>

CodePen Demo

Tags:

4

Answers


  1. 0

    (I assume you meant “vertically center”; since there’s only one column in your example, there’s nothing to align it with.)

    The container-fluid is assigned a minimum height of 10rem in Bootstrap. To vertically center your text, you need to stretch the row to match it:

    #heading-cont > .row {
    height: 100%;
}
    Login or Signup to reply.
  2. 0

    You will need to give the row a height of 100% so that there is room to center the text in.

    .row {
   height: 100%;
 }
    Login or Signup to reply.
  3. 0

    You can add a class (in my example .x) to #heading-cont and apply the following CSS to it to make it a flexbox container and vertically center its contents:

    .x {
  display:flex;
  flex-direction: column;
  justify-content: center;
}

    https://codepen.io/anon/pen/GMdazJ

    Login or Signup to reply.
  4. 0

    Firstly, use the bootstrap 4 classes like they were meant to be used :
    class=”d-flex flex-column justify-content-center”, and then you don’t need to add the height to the row. Don’t make seperate css rules that just repeat existing utility classes if you don’t have to. 

    /*containers*/

.container-fluid {
  padding: 0;
}

#heading-cont {
  background-color: #F7CE38;
  height: 10rem;
}

#subheading {
  height: 8rem
}

#heading-cont > .row {
 /* height: 10rem;*/
}

#subheading > .row {
    /*height: 100%;*/
}

/*type + color*/

h1 {
  font-size: 3rem !important;
}

h3 {
  font-size: 2rem !important;
}

.white {
  color: white;
}

.margin-b {
  margin-bottom: 2rem;
}


.title {
  font-family: 'Montserrat', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 300;
}

.description {
  font-family: 'Pathway Gothic One', Arial, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

/*social-prof*/

.box {
  background-color: #E0E0E0;
  height: 20rem;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<section class="header">
  <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title white text-center">Digital</h1>
        <h3 class="description white text-center">This is the description.</h3>
      </div>
    </div>
  </div>
</section>

<section class="social-prof">
  <div class="container-fluid d-flex flex-column justify-content-center" id="subheading">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="title text-center">Branding</h1>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="bu">
    <div class="row">
      <div class="col-sm-12">
        <div class="box">
          <div class="layer">
            <h3 class="description white text-center margin-b">Small Business Services</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    https://codepen.io/anon/pen/oGyrPg

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search