Bootstrap 4.0 > Utilities > 1/4 by : Brad Traversy

PHOTO EMBED

Thu Mar 18 2021 03:38:32 GMT+0000 (Coordinated Universal Time)

Saved by @jpannu #css #bootstrap

             /*      Utilities             */

/* Break points for Grid */          

Extra small  <576px	
Small        ≥576px
Medium       ≥ 768px	
Large        ≥992px	
Extra large  ≥1200px

/* Basic Typography  */
/* HEADINGS */
<h4>Heading Four</h4>
<h5 class="h1">Heading Five</h5>  /* Biggest size  */
<h6>Heading Six</h6>

/* DISPLAY CLASSES */ 
<h1 class="display-1">Display 1</h1>
<h1>Display 2</h1>
<h1>Display 3</h1>
<h1 class="display-4">Display 4</h1>


/* PARAGRAPHS */ 
<!-- LEAD -->
<p class="lead">Loremdita eum,quaerat, vitae dolorum, dolor autem reiciendis                 sapiente.</p>
<!-- MONOSPACE PARAGRAPH -->
<p class="text-monospace">My monospace paragraph</p>


/* STYLE CLASSES */
<p class="font-weight-bold">Bold Text</p>
<p class="font-weight-normal">Normal Text</p>
<p class="font-italic">Italic Text</pA>

/* TEXT TRANSFORMS */
<p class="text-lowercase">MAKE LOWERCASE</p>
<p class="text-uppercase">make uppercase</p>
<p class="text-capitalize">make capitalized</p>

/* BLOCKQUOTES */ 
<blockquote class="blockquote">
<p>This is a blockquote</p>
</blockquote>

<!-- BLOCKQUOTE RIGHT ALIGNED -->
<blockquote class="blockquote text-right">
<p>This is a blockquote aligned right</p>
</blockquote>

<!-- BLOCKQUOTE WITH FOOTER -->
<blockquote>
<footer class="blockquote-footer">Someone famous here.
</footer>


/* LISTS */ 
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>

<!-- INLINE LIST -->
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
</ul>
/* -----------------------------XX---------------- */

    /*      Text-align and display    */

<!-- ALIGNMENT -->
<p class="text-left">Text aligned left</p>
<p class="text-center">Text aligned center</p>
<p class="text-right">Text aligned right</p>

<!-- RESPONSIVE ALIGN -->
<p class="text-sm-right">Right aligned on small or larger</p>
<p class="text-lg-right">Right aligned on large or larger</p>
<p class="text-xl-right">Right aligned on xl or larger</p>

<p class="text-sm-left">Left aligned text on small or larger</p>
<p class="text-md-left">Left aligned text on medium or larger</p>
<p class="text-lg-left">Left aligned text on large or wider</p>
<p class="text-xl-left">Left aligned text on extra large or wider</p>

<p class="text-sm-center">Center aligned text on small or larger</p>
<p class="text-md-center">Center aligned text on medium or larger</p>
<p class="text-lg-center">Center aligned text on large or wider</p>
<p class="text-xl-center">Center aligned text on extra large or wider</p>

<!-- VERTICAL ALIGNMENT -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-bottom">bottom</span>
<span class="align-middle">middle</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

<!-- TURN BLOCK TO INLINE -->
<h1 class="d-inline">Hello</h1>
<h1 class="d-inline">Goodbye</h1>

<!-- TURN INLINE TO BLOCK -->
<span class="d-block bg-primary">Block</span>

<!-- INLINE BLOCK -->
<div class="d-inline-block bg-primary">
<h3 class=''>Hello</h3>
This is inline
</div>
<div  class="d-inline-block bg-warning">
<h3 class=''>Hello</h3>
This is inline
</div>
/* -----------------------------XX--------------------- */

/*       Floats & Fixed Positions   */

<!-- FLOATS -->
<div class="float-left">Float left</div>
<br>
<div class="float-right">Float right</div>
<br>
<div class="float-none">Float none</div>
<br>

<!-- RESPONSIVE FLOATS -->
<div class="float-sm-right">Float right on small or wider</div>
<br>
<div class="float-md-right">Float right on medium or wider</div>
<br>
<div class="float-lg-right">Float right on large or wider</div>
<br>
<div class="float-xl-right">Float right on extra large or wider</div>
<br>

<div class="float-sm-left">Float left on small or wider</div>
<br>
<div class="float-md-left">Float left on medium or wider</div>
<br>
<div class="float-lg-left">Float left on large or wider</div>
<br>
<div class="float-xl-left">Float left on extra large or wider</div>
<br>

<div class="float-sm-none">Float none on small or wider</div>
<br>
<div class="float-md-none">Float none on medium or wider</div>
<br>
<div class="float-lg-none">Float none on large or wider</div>
<br>
<div class="float-xl-none">Float none on extra large or wider</div>
<br>

<br>
<br>

<!-- CLEARFIX -->
<div class="bg-success clearfix">
<button class="float-left">Float Left</button>
<button class="float-right">Float Right</button>
</div>

<!-- FIXED TOP -->
<h3 class="fixed-top">Fixed Top</h3>

<!-- FIXED STICKY -->
<h3 class="sticky-top bg-success">Sticky</h3>

<!-- FIXED BOTTOM -->
<h3 class="fixed-bottom">Fixed Bottom</h3>


     /* Colors & Background */

<!-- TEXT COLORS -->
<p class="text-primary">Text Primary Color</p>
<p class="text-secondary">Text Secondary Color</p>
<p class="text-success">Text Success Color</p>
<p class="text-info">Text Info Color</p>
<p class="text-warning">Text Warning Color</p>
<p class="text-danger">Text Danger Color</p>
<p class="text-light">Text Light Color</p>
<p class="text-dark">Text Dark Color</p>
<p class="text-white">Text White Color</p>
<p class="text-muted">Text Muted</p>
<p class="text-black-50">Text Black 50</p>
<p class="text-white-50 bg-primary">Text White 50</p>

<br>
<br>

<!-- BACKGROUND COLORS -->
<div class="bg-primary">Background Primary Color</div>
<div class="bg-secondary">Background Secondary Color</div>
<div class="bg-success">Background Success Color</div>
<div class="bg-info">Background Info Color</div>
<div class="bg-warning">Background Warning Color</div>
<div class="bg-danger">Background Danger Color</div>
<div class="bg-light">Background Light Color</div>
<div class="bg-dark">Background Dark Color</div>
<div class="bg-white">Background White Color</div>
<div class="bg-transparent">Background Transparent</div>

<!-- INVISIBLE -->
<p class="invisible">Hello</p>
/* -----------------------------XX--------------------- */
     /*      Spacing               */

Size and Values ( rem ):
0 : 0
1 : .25rem
2 : .5rem
3 : 1rem
4 : 1.25rem
5 : 3rem

x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom


  <!-- MB MARGIN BOTTOM -->
        <h1 class="bg-success mb-0">Margin Bottom 0</h1>
        <h1 class="bg-success mb-1">Margin Bottom 1</h1>
        <h1 class="bg-success mb-2">Margin Bottom 2</h1>
        <h1 class="bg-success mb-3">Margin Bottom 3</h1>
        <h1 class="bg-success mb-4">Margin Bottom 4</h1>
        <h1 class="bg-success mb-5">Margin Bottom 5</h1>

        <br>
        <br>

        <!-- MT MARGIN TOP -->
        <h1 class="bg-success mt-0">Margin Top 0</h1>
        <h1 class="bg-success mt-1">Margin Top 1</h1>
        <h1 class="bg-success mt-2">Margin Top 2</h1>
        <h1 class="bg-success mt-3">Margin Top 3</h1>
        <h1 class="bg-success mt-4">Margin Top 4</h1>
        <h1 class="bg-success mt-5">Margin Top 5</h1>

        <br>
        <br>

        <!-- ML & MR -->
        <p>
            <span class="bg-success mr-5">Margin Right 5</span> dolor sit amet,
            <span class="bg-success ml-3">Margin Left 3 </span> 
        </p>

        <br>
        <br>

        <!-- MX MARGIN LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-success mx-5">Margin Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- MY  MARGIN TOP BOTTOM -->
        <p class="bg-success my-5">Margin Top & Bottom 5</p>

        <br>
        <br>

        <!-- BLANK - ALL SIDES -->
        <p class="bg-success m-5">Margin All Sides 5</p>

        <br>
        <br>

        <!-- PB PADDING BOTTOM -->
        <h1 class="bg-warning p-0">Padding Bottom 0</h1>
        <h1 class="bg-warning pb-1">Padding Bottom 1</h1>
        <h1 class="bg-warning pb-2">Padding Bottom 2</h1>
        <h1 class="bg-warning pb-3">Padding Bottom 3</h1>
        <h1 class="bg-warning pb-4">Padding Bottom 4</h1>
        <h1 class="bg-warning pb-5">Padding Bottom 5</h1>

        <br>
        <br>

        <!-- PT PADDING TOP -->
        <h1 class="bg-warning pt-0">Padding Top 0</h1>
        <h1 class="bg-warning pt-1">Padding Top 1</h1>
        <h1 class="bg-warning pt-2">Padding Top 2</h1>
        <h1 class="bg-warning pt-3">Padding Top 3</h1>
        <h1 class="bg-warning pt-4">Padding Top 4</h1>
        <h1 class="bg-warning pt-5">Padding Top 5</h1>

        <br>
        <br>

        <!-- PL & PR -->
        <p>
            <span class="bg-warning pr-5">Padding Right 5</span>                              <span class="bg-warning pl-3">Padding Left 3 </span>
        </p>

        <br>
        <br>

        <!-- PX PADDING LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="bg-warning pl-5 pr-5">Padding Left & Right 5</span>
        </p>

        <br>
        <br>

        <!-- PY  PADDING TOP BOTTOM -->
        <p class="bg-warning pt-5 pb-5">Padding Top & Bottom 5</p>

        <br>
        <br>

        <!-- ALL SIDES -->
        <p class="bg-warning p-5">Padding All Sides 5</p>

        <!-- HORIZONTAL CENTERING -->
        <div class="bg-info mx-auto" style="width: 200px;">
            Horizontal Centering
        </div>
          /* -----------------------------XX----------------- */
              
                       /*        Sizing & Borders         */
 <!-- WIDTH CLASSES -->
        <div class="w-25    bg-success  p-3">Width 25%</div>
        <div class="w-50    bg-success  p-3">Width 50%</div>
        <div class="w-75    bg-success  p-3">Width 75%</div>
        <div class="w-100   bg-success  p-3">Width 100%</div>
        <div class="w-auto  bg-success  p-3">Width Auto</div>

        <br>
        <br>

        <!-- HEIGHT CLASSES -->
        <div style="height: 200px;border : 1px solid black">
            <div class="h-25 bg-primary d-inline-block">Height 25%</div>
            <div class="h-50 bg-primary d-inline-block">Height 50%</div>
            <div class="h-75 bg-primary d-inline-block">Height 75%</div>
            <div class="h-100 bg-primary d-inline-block">Height 100%</div>
            <div class="h-auto bg-primary d-inline-block">Height Auto</div>
        </div>

        <br>
        <br>

        <!-- BORDERS -->
        <div class="border p-3 mb-2 bg-light">Regular</div>
        <div class="border-top b1 p-3 mb-2 bg-light">Border Top</div>
        <div class="border-bottom p-3 mb-2 bg-light">Border Bottom</div>
        <div class="border-right p-3 mb-2 bg-light">Border Right</div>
        <div class="border-left p-3 mb-2 bg-light">Border Left</div>

        <br>
        <br>

        <!-- BORDER COLORS -->
        <div class="border border-primary p-3 mb-2 bg-light">Primary</div>
        <div class="border border-secondary p-3 mb-2 bg-light">Secondary</div>
        <div class="border border-success p-3 mb-2 bg-light">Success</div>
        <div class="border border-info p-3 mb-2 bg-light">Info</div>
        <div class="border border-warning p-3 mb-2 bg-light">Warning</div>
        <div class="border border-danger p-3 mb-2 bg-light">Danger</div>
        <div class="border border-light p-3 mb-2 bg-light">Light</div>
        <div class="border border-dark p-3 mb-2 bg-light">Dark</div>
        <div class="border border-white p-3 mb-2 bg-light">White</div>

        <br>
        <br>

        <!-- BORDER RADIUS -->
        <div class="border rounded p-3 mb-2 bg-light">Rounded</div>
        <div class="border rounded-top p-3 mb-2 bg-light">Rounded Top</div>
        <div class="border rounded-bottom p-3 mb-2 bg-light">Rounded Bottom</div>
        <div class="border rounded-right p-3 mb-2 bg-light">Rounded Right</div>
        <div class="border rounded-left p-3 mb-2 bg-light">Rounded Left</div>
        <div class="border rounded-circle w-25 p-3 mb-2 bg-light">Rounded Circle</div>
        <div class="border rounded-0 p-3 mb-2 bg-light">Dark</div>

       /* -----------------------------XX---------------------- */
                  /*      Custom Breakpoints           */



content_copyCOPY