CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
techie11
techie11

Reputation: 1387

Boostrap container aligment and border

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

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

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

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

The result is:

enter image description here

Question:

  1. 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?

  2. Why is the bottom border missing for container-fliud?

Upvotes: 0

Views: 97

Answers (2)

Kuldeep J
Kuldeep J

Reputation: 552

  1. you can read more about alignment here
    refer this snippet
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
  1. You haven't closed the container-fluid div
<div class="container-fluid" style="border:1px solid #cecece;">
  <h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
  <p>
    <button type="button" class="btn btn-info">example button 1</button>
    <button type="button" class="btn btn-danger">example button 2</button>
  </p>
</div>

Upvotes: 1

nd03
nd03

Reputation: 98

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

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

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

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

Upvotes: 2

Related Questions