Center Contents of Bootstrap row container

前端未结

关注

 4  1009

I have the code below and I\'d like to center the \"well\" elements of the outer \"row\" div. I\'ve tried various approaches such as text-align: center (which just centers

相关标签:

4条回答

春和景丽

2020-12-24 05:25
For Bootstrap 4, use the below code:
```
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>
```
Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦谈多话

2020-12-24 05:28

I solved this by doing the following:

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

0 讨论(0)

再見小時候

2020-12-24 05:43
With Bootstrap 4, there is a css class specifically for this. The below will center row content:
```
<div class="row justify-content-center">
  ...inner divs and content...
</div>
```
See: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment, for more information.
0 讨论(0)
发布评论:

提交评论
- 加载中...

忘掉有多难

2020-12-24 05:43

Try this, it works!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

Then, in css define the width of center div and center in a document:

.center {
    margin: 0 auto;
    width: 80%;
}

0 讨论(0)