Menu
I am having problem centering my container.
<div class="row centered-form center-block">
<div class="container col-md-10">
<ul class="nav nav-tabs" id="projectTabs">
<li role="presentation" class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li role="presentation"><a href="#Tab2" data-toggle="tab">Tab2</a></li>
</ul>
</div>
</div>
The main row is centered with approximately 65% width, but the container which contains navigation tabs sticks in this main row left.
Thank you in advance.
903
Just add the class . text-center to the parent element of the text to center content horizontally.
One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.
To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
Use the col-md-offset-1 class to move the container toward the center. Bootstrap uses a 12 column layout system so col-md-10 makes your container 10 columns wide but it starts on the left. Use offset to push the element over to the right by the indicated amount, so col-md-offset-1 moves it 1 column to the right.
<div class="row centered-form center-block">
<div class="container col-md-10 col-md-offset-1">
...
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
