[TIL] 20201124 CSS Frameworks: Bootstrap

Bootstrap

• CSS Framework
  • Framework : Helps speed up the process.
• Bootstrap
  • It helps developers quickly create nice looking, responsive modern websites so we don't have to write a smuch CSS.
  • Has components(ex. nav bar, buttons...) and Grid System(responsive pre-set grid).

 

 

Including Bootstrap 

• Can be included using CDN (no download needed)
• In real production application, it would be more stable to download Bootstrap.
• As soon as applied, there are some dafault changes. (font, margin, etc.)

 

 

Containers

• The most basic layout element.
• Required when using default Bootstrap grid system.
• types of containers
  • .container : sets a max-width at each responsive breakpoint.
  • .container-fluid : width: 100% at all breakpoints.

 

 

Buttons

• There are pre-set button designs. But design, size, color, etc. can be changed.
• Bootstrap buttons can be used for other types elements, i.e. <a>, <input>.

 

 

Typography

• Display headings : larger, slightly more opinionated heading style.
• .lead : Make a paragraph stand out by changing font-size and font-weight.
• .blockquote
• .blockquote-footer : footer for blockquote.
  • <footer class="blockquote">

 

 

Badges

• Small count and labeling component.

 

 

Button Group

• Group a series of buttons together on a single line with the button group.
• Syntax

<div class="btn-group" role="group">       
    <!-- buttons -->
</div>



<!-- role : indication for screen readers -->

 

 

Alert

• Provides contextual feedback messages for typical user actions with the handful of available and flexible alert mesasges. 

 

 

Grid System

• It only works inside of a container or container-fluid.
• A row should be created, by using the class of row.
• Every row in Bootstrap has 12 units of space to divvy up.
  • If less than 12 units are used, the row takes up as less space as the units.
  • If more than 12 units are used, the excess columns are moved to the next row.
• Columns are inside or rows.

<!-- EXAMPLE -->

<div class="container">
    <div class="row">
    	<div class="col">
        	COLUMN ONE
        </div>
        <div class="col">
        	COLUMN TWO
        </div>
        <div class="col">
        	COLUMN THREE
        </div>
    </div>
</div>

 

 

 

Responsive Bootstrap Grid

• Syntax : .col-{size}-{units}

<!-- EXAMPLE -->

<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
    Column
</div>

 

 

 

Gutters

• Left-over space between the content and the grid.
• .no-gutter : remove all the gutters.

 

 

Grid Utilities

• alignment, justify-content
• Works like flexbox (same values)

 

 

Forms

• Create nicer looking forms
• .form-control
  • ex) <input type="email" class="form-control">
• .form-group
  • Used for select

<!-- EXAMPLE -->

<div class="form-group">
    <label for="state">State</label>
    <select class="form-control" name="state" id="state">
    	<option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
    </select>
</div>

• .form-row
  • It's the same as row, but with less spacing between columns.

 

 

Custom Forms

• Checkboxes

<!-- EXAMPLE -->


<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">I agree</label>
</div>

• Radiobuttons
• Toggle Switches
• Select

 

 

NavBars

<!-- EXAMPLE -->


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" 
  data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" 
  aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

• placement
  • value : default, fixed-top, fixed-bottom, sticky-top(shows contents above navbar)

 

 

Icons

• Free set of icons
• HTML svg
• fontawsome.com : more free icons

 

 

 

Border

• Values : .border, .border-top, .border-right, .border-left, .border-bottom

 

 

Spacing

• Syntax
  • xs : {property}{sides}-{size}
  • s, m, l, xl : {property}{sides}-{breakpoint}-{size}
• Property
  • m : margin
  • p: padding
• Sides
  • t : top
  • b : bottom
  • l : left
  • r : right
  • x : left, right
  • y : top, bottom
  • (blank) : all 4 sides
• Size
  • 0~5 : The bigger the number is, the bigger the space is.
  • auto : For classes that set the margin to auto

 

 

Hiding Element

• xs : .d-none
• s, m, l, xl : .d-{size}-none

 

 

Cards

• Generic content container

 

 

Carousel

• Image Slider

 

 

Modal

• Pop-up dialog

 

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.