Center div inside parent bootstrap row

Question

Within the following example https://codepen.io/centem/pen/GQVGmw I'm trying to center the divs that have numbers inside them with a .centered class but it does not center. How do I center these so they sit in the middle of the row instead of to the left?

CSS:

.centered {
  margin: 0 auto;
}

DIVs:

<div class="row">
  <div id="83" class="square centerd">83</div>
  <div id="84" class="square centered">84</div>
  <div id="85" class="square centered">85</div>
</div>

add `justify-content-center` with the row class so you have `row justify-content-center` — Temani Afif, Mar 07 '18 at 14:23
i also advise you to read this : https://getbootstrap.com/docs/4.0/utilities/flex/ you will find all the class needed to do what you want — Temani Afif, Mar 07 '18 at 14:26

score 6 · Answer 1 · answered Mar 07 '18 at 14:26

6

Simple:

<div class="row justify-content-center">
  <div id="83" class="square centerd">83</div>
  <div id="84" class="square centered">84</div>
  <div id="85" class="square centered">85</div>
</div>

answered Mar 07 '18 at 14:26

Felipe Perucci M. Do Amaral

124
11

Center div inside parent bootstrap row

1 Answers1