Please enable JavaScript.

Coggle requires JavaScript to display documents.

Bootstrap 4 (Getting Started (Introduction the world’s most popular…

- - - - Components requiring JavaScript
        
        Alerts for dismissing
        
        Buttons for toggling states and checkbox/radio functionality
        
        Carousel for all slide behaviors, controls, and indicators
        
        Collapse for toggling visibility of content
        
        Dropdowns for displaying and positioning (also requires Popper.js)
        
        Modals for displaying, positioning, and scroll behavior
        
        Navbar for extending our Collapse plugin to implement responsive behavior
        
        Tooltips and popovers for displaying and positioning (also requires Popper.js)
        
        Scrollspy for scroll behavior and navigation updates
    - - HTML5 doctype
        <!doctype html>
      - Responsive meta tag<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  - - - bootstrap.css
        bootstrap.min.css
        bootstrap.css.map
        bootstrap.min.css.map
        
        Layout: Included
        Content: Included
        Components: Included
        Utilities: Included
      - bootstrap-grid.css
        bootstrap-grid.min.css
        bootstrap-grid.css.map
        bootstrap-grid.min.css.map
        
        Layout: Only grid system
        Content: Not included
        Components: Not included
        Utilities: Only flex utilities
      - bootstrap-reboot.css
        bootstrap-reboot.min.css
        bootstrap-reboot.css.map
        bootstrap-reboot.min.css.map
        
        Layout: Not included
        Content: Only Reboot
        Components: Not included
        Utilities: Not included
    - - bootstrap.bundle.js
        bootstrap.bundle.min.js
        
        Popper: Included
        jQuery: Not included
      - bootstrap.js
        bootstrap.min.js
        
        Popper: Not included
        jQuery: Not included
    - - bootstrap/dist/
        
        Includes everything
      - bootstrap/docs/
        
        Includes the source code for our documentation
      - bootstrap/js/
        bootstrap/scss/
        
        The source code for our CSS and JavaScript.
  - - - Android
        
        Chrome: Supported
        Firefox: Supported
        Safari: N/A
        Android Browser & WebView: Android v5.0+ supported
        Microsoft Edge: Supported
      - iOS
        
        Chrome: Supported
        Firefox: Supported
        Safari: Supported
        Android Browser & WebView: N/A
        Microsoft Edge: Supported
      - Windows 10 Mobile
        
        Chrome: N/A
        Firefox: N/A
        Safari: N/A
        Android Browser & WebView: N/A
        Microsoft Edge: Supported
    - - Mac
        
        Chrome: Supported
        Firefox: Supported
        Internet Explorer: N/A
        Microsoft Edge: N/A
        Opera: Supported
        Safari: Supported
      - Windows
        
        Chrome: Supported
        Firefox: Supported
        Internet Explorer: Supported, IE10+
        Microsoft Edge: Supported
        Opera: Supported
        Safari: Not supported
- - - - Equal-width
        Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
        
        Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border.
        <div class="container"> <div class="row"> <div class="col">Column</div> <div class="col">Column</div> <div class="w-100"></div> <div class="col">Column</div> <div class="col">Column</div> </div> </div>
      - Setting one column 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, grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
      - Variable width content
        Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.
      - Equal-width multi-row
        Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities. #
    - - All breakpoints
        For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
      - Stacked to horizontal
        Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).
      - Mix and match
        Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
    - - Vertical alignment
        row:
        
        .row.align-items-start
        
        .row.align-items-center
        
        .row.align-items-end
        
        col:
        
        .col.align-self-start
        
        .col.align-self-center
        
        .col.align-self-end
      - Horizontal alignment
        
        .row.justify-content-start
        
        .row.justify-content-center
        
        .row.justify-content-end
        
        .row.justify-content-around
        
        .row.justify-content-between
      - No gutters
        The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
        
        Note that column overrides are scoped to only the first children columns and are targeted via attribute selector.
        
        Need an edge-to-edge design? Drop the parent .container or .container-fluid.
      - Column wrapping
        If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
      - Column breaks
        Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.
        
        You may also apply this break at specific breakpoints with our responsive display utilities:
        <div class="w-100 d-none d-md-block"></div>
    - - Order classes
        
        Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.
        
        There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.
      - Offsetting columns
        You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
        
        Offset classes
        Move columns to the right using .offset-md- classes. These classes increase the left margin of a column by columns. For example, .offset-md-4 moves .col-md-4 over four columns.
        
        Margin utilities
        With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.
    - - Variables
        Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns.
      - Mixins
        Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
        
        Creates a wrapper for a series of columns:
        @include make-row();
        
        Get fancy by offsetting, or changing the sort order:
        @include make-col-offset($size, $columns: $grid-columns);
- - - - Address
        The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added.
      - Blockquote
        The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.
      - Inline elements
        The <abbr> element receives basic styling to make it stand out amongst paragraph text.
      - Summary
        The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.