Boostrap container aligment and border-CodePudding

I'm learning bootstrap. Following is the code to display buttons in different containers:

<div  style="border:1px solid #cecece;">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" >example button 1</button>
<button type="button" >example button 2</button>
</p> 
</div>

<div  style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" >example button 1</button>
<button type="button" >example button 2</button>
</p>

<div  style="border:1px solid #cecece;">
<h1>Bootstrap 4 container-md (.container-md class)</h1>
<p>
<button type="button" >example button 1</button>
<button type="button" >example button 2</button>
</p>
</div>

The result is:

Question:

There are no alignments specified in the code, but the 3 types of container align differently (container and container-md align to the center, while container-fliud aligns to the left). are there default alignment for different type of containers?
Why is the bottom border missing for container-fliud?

CodePudding user response：

you can read more about alignment ...

<div style="border:1px solid #cecece;"> <h1>Bootstrap 4 fluid container (.container-fluid class)</h1> <p> <button type="button" >example button 1</button> <button type="button" >example button 2</button> </p> </div>

CodePudding user response：

You don't have a div closing tag for your second container. The code below should fix it.

<div style="border:1px solid #cecece;"> <h1>Bootstrap 4 simple container (.container class)</h1> <p> <button type="button" >example button 1</button> <button type="button" >example button 2</button> </p> </div> <div style="border:1px solid #cecece;"> <h1>Bootstrap 4 fluid container (.container-fluid class)</h1> <p> <button type="button" >example button 1</button> <button type="button" >example button 2</button> </p> </div> <div style="border:1px solid #cecece;"> <h1>Bootstrap 4 container-md (.container-md class)</h1> <p> <button type="button" >example button 1</button> <button type="button" >example button 2</button> </p> </div>