CODEWITHSUNDEEP
htmlcssbootstrap-4
user791379
user791379

Reputation:

Is it possible to combine row and container classes on a single element?

Watching a tutorial today with someone creating a website using Bootstrap 4, I noticed that he put both 'row' and 'container' as classes for the same div which is wrong according to Bootstrap documentation. I have always understood that they have to be nested, but it appeared to work fine. I have tried this in a test document of my own but the 'container' class fails to centralize the div. So what apparently worked in the video does not work for me. Can anyone explain why it works in one setting but not in another? Here's my non-working code:

<div class="container row">
    <div class="col-md-6 d-flex justify-content-center align-items-center" style="background-color: steelblue;height:50vh;">
       <h1 class="d-inline-block" style="outline: 1px solid red;">Some text</h1>
    </div>
    <div class="col-md-6" style="background-color: pink;height:50vh;"></div>
</div>

Upvotes: 0

Views: 142

Answers (1)

Yudiz Solutions
Yudiz Solutions

Reputation: 4469

In Bootstrap 4 .container class includes style margin-left: auto; margin-right: auto; which centralizes the div. But, as you apply .row in .container the margin-left: auto and margin-right: auto; gets overridden by row's styling for margin i.e. margin-left: -15px; margin-right: -15px; so, the div is not centralized and as per the Bootstrap docs Rows are used to align columns to the left side by using negative margin. If you have saw the tutorial closely class mx-auto is used which is nothing but margin-left: auto !important; margin-right: auto !important; which is used to centralize the div.

Upvotes: 0

Related Questions