bootstrap

Grid Options - Break Points

January 07, 2021

gridOptions

Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes

  • Equal-width 
    For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

    Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

    Responsive classes

    Bootstrap’s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

    * Grid Options -Break Points


  • Columns

    Alignment 

    Use flexbox alignment utilities to vertically and horizontally align columns.

    * Horizontal Alignment ( justify-content-start/ end/ center )

        <div class="container">
        <div class="row justify-content-center">
         <!-- <div class="col-6"> -->
          <div class="col-lg-6 col-sm-12 text-center p-4">
            <h1 class="display-3">START BOOTSTRAP</h1>
             <p class="lead fs-4">the quick bown fox jumps voer teha laxy xog</p>
              <!-- <p>
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
                the quick bown fox jumps voer teha laxy xog
               /p> -->
             </div>
        </div>
        </div>



    * Vertical Alignment ( align-items-start/ end/ center )


  • Breakpoints & Media Queries

    Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.