center content of row display block Bootstrap v4

Question

I am using Bootstrap v4.3.1 but I did change on the bootstrap.min.css file all the display:flex; replace by display:block;

because flex not working fine on printing mode on firefox .. anyway after changing this line any row class cannot be center even if I used justifice-content-center.

I think the reason because row class is block not flex so how do I center the content of row when its block?

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

update #1 Just to make it clear I am using edited Bootstrap as following

<link rel="stylesheet" media="print" href="'css/Editedbootstrap.css" />

so it's only on printing mode,see the following post to get more information on what type of problem I am facing

first of all, this is the wrong thing, you can not change `bootstrap.min.css` directly. — Nisharg Shah, Apr 14 '20 at 04:46
bootstrap internally manage all things using `flexbox`, so your `sm, md, lg, xl` will not working — Nisharg Shah, Apr 14 '20 at 04:47

score 0 · Answer 1 · answered Apr 14 '20 at 04:55

0

I warn you before posting an answer, bootstrap.min.css must not be changed directly.

If you don't want to use flexbox, use Bootstrap 3

For centering any block like .row, you can use text-center class or use CSS.

.row {
    text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

answered Apr 14 '20 at 04:55

Nisharg Shah

16,638
10
62
73

If you like my answer or you got any help from my answer, don't forget to consider up-vote and check this answer as the best answer for you by clicking on the right arrow, thanks! – Nisharg Shah Apr 25 '20 at 10:34

score -1 · Answer 2 · answered Apr 13 '20 at 23:44

-1

To position a div(block element) in the center, the technique is to make both the left and right margins auto and then give the div a width:

.center-div {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

answered Apr 13 '20 at 23:44

Naseh Badalov

334
1
8

center content of row display block Bootstrap v4

2 Answers2