-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
145 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| <!-- Bootstrap 4 starter template --> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- Required meta tags --> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" | ||
| integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | ||
|
|
||
| <title>Spacing</title> | ||
| </head> | ||
| <body> | ||
| <br> | ||
| <br> | ||
| <div class="container"> | ||
|
|
||
| <!-- Margin --> | ||
| <!-- MB Margin Bottom --> | ||
| <h1 class="mb-0 bg-success">Margin bottom mb-0</h1> | ||
| <h1 class="mb-1 bg-success">Margin bottom mb-1</h1> | ||
| <h1 class="mb-2 bg-success">Margin bottom mb-2</h1> | ||
| <h1 class="mb-3 bg-success">Margin bottom mb-3</h1> | ||
| <h1 class="mb-4 bg-success">Margin bottom mb-4</h1> | ||
| <h1 class="mb-5 bg-success">Margin bottom mb-5</h1> | ||
|
|
||
|
|
||
|
|
||
| <!-- MT Margin Top --> | ||
| <h1 class="mt-0 bg-success">Margin top mt-0</h1> | ||
| <h1 class="mt-1 bg-success">Margin top mt-1</h1> | ||
| <h1 class="mt-2 bg-success">Margin top mt-2</h1> | ||
| <h1 class="mt-3 bg-success">Margin top mt-3</h1> | ||
| <h1 class="mt-4 bg-success">Margin top mt-4</h1> | ||
| <h1 class="mt-5 bg-success">Margin top mt-5</h1> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- ML and MR --> | ||
| <p> | ||
| <span class="bg-success mr-5">Margin right 5</span>Lorem ipsum dolor sit. | ||
| <span class="bg-success ml-3">Margin left 3</span>Lorem ipsum dolor sit amet, consectetur adipisicing. | ||
| </p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- MX Margin left right --> | ||
| <p>Lorem ipsum.<span class="mx-5 bg-success">Margin left and right 5</span>Lorem ipsum dolor sit amet, consectetur.</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- MY Margin Top Bottom --> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, voluptatum.</p> | ||
| <p class="my-5 bg-success">Margin top bottom 5</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit?</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- M Margin All sides --> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, voluptatum.</p> | ||
| <p class="m-5 bg-success">Margin All sides 5</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit?</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Padding --> | ||
| <!-- PB Padding Bottom --> | ||
| <h1 class="pb-0 bg-warning">Padding bottom pb-0</h1> | ||
| <h1 class="pb-1 bg-warning">Padding bottom pb-1</h1> | ||
| <h1 class="pb-2 bg-warning">Padding bottom pb-2</h1> | ||
| <h1 class="pb-3 bg-warning">Padding bottom pb-3</h1> | ||
| <h1 class="pb-4 bg-warning">Padding bottom pb-4</h1> | ||
| <h1 class="pb-5 bg-warning">Padding bottom pb-5</h1> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- PB Padding Bottom --> | ||
| <h1 class="pt-0 bg-warning">Padding top pt-0</h1> | ||
| <h1 class="pt-1 bg-warning">Padding top pt-1</h1> | ||
| <h1 class="pt-2 bg-warning">Padding top pt-2</h1> | ||
| <h1 class="pt-3 bg-warning">Padding top pt-3</h1> | ||
| <h1 class="pt-4 bg-warning">Padding top pt-4</h1> | ||
| <h1 class="pt-5 bg-warning">Padding top pt-5</h1> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- PL and PR --> | ||
| <p> | ||
| <span class="bg-warning pr-5">Padding right 5</span>Lorem ipsum dolor sit. | ||
| <span class="bg-warning pl-3">Padding left 3</span>Lorem ipsum dolor sit amet, consectetur adipisicing. | ||
| </p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- PX Padding left right --> | ||
| <p>Lorem ipsum.<span class="px-5 bg-warning">Padding left and right 5</span>Lorem ipsum dolor sit amet, consectetur.</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- MY Margin Top Bottom --> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, voluptatum.</p> | ||
| <p class="py-5 bg-warning">Padding top bottom 5</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit?</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- M Margin All sides --> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, voluptatum.</p> | ||
| <p class="p-5 bg-success">Padding All sides 5</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, sit?</p> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Horizontal Centering --> | ||
| <div class="bg-info mx-auto" style="width:200px;">Horizontal centering</div> | ||
| <br> | ||
| <br> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <!-- Optional JavaScript --> | ||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" | ||
| integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" | ||
| integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" | ||
| integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> | ||
| </body> | ||
| </html> |