0

Just like the title says, in Bootstrap 4, I can't figure out how to center content inside a column that's inside .container-fluid.

Here's my code, can someone please let me know what I did wrong?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 my-auto mx-auto">
      <div class="mx-auto">
        <h1 class="mb-5">This is a title
        </h1>
        <p class="mb-5">Lorem ipsum</p>
        <a href="#">Click me</a>
      </div>
    </div>
    <div class="col-md-8">
      <p>Something else that's not important but needs to be here </p>
    </div>
  </div>

Why doesn't the .mx-auto work and what can I use instead of it?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
hemoglobin
  • 761
  • 4
  • 12
  • 33

1 Answers1

6

The col-* are flex items, so you have to also make them flex container in order to center their content like you want (vertically or/and horizontally) using margin:auto with elements (my-auto/mx-auto) or align-items-*/jusity-content-* with the container:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
      <h1 class="mb-5">This is a title
      </h1>
      <p class="mb-5">Lorem ipsum</p>
      <a href="#">Click me</a>
    </div>
    <div class="col-md-8 d-flex flex-column ">
      <p class="my-auto mx-auto">Something else that's not important but needs to be here </p>
    </div>
  </div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • And there's no way the text inside the col-4 can be left aligned, while the entire thing is centered? if that makes sense... – hemoglobin Feb 11 '18 at 20:52
  • @hemoglobin yes you can ;) simply play with classes, as here i specified them to make everyhing centred :) – Temani Afif Feb 11 '18 at 20:54
  • @hemoglobin or maybe i didn't get you .. can elaborate more ? – Temani Afif Feb 11 '18 at 20:56
  • Thank you! This was exactly what I needed. I just wrapped them in a div too, and added text-left class to it. I'm accepting your answer as soon as SO lets me!! – hemoglobin Feb 11 '18 at 20:57