Cards

Bootstrap's Cards are content containers that are highly customizable. We're going to look at just the basic implementation.

Card API

Markup

card - Class that dictates the element is a card

card-body - Adds padding to main content of the card.

    

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    

        

See the Pen BS - Card by Jon (@Middaugh) on CodePen.

Card Images

You can add an image at the top of a card. Card images will automatically scale with the card.

    
    

        
Some quick example text to build on the card title and make up the bulk of the card's content.
    
        
    

See the Pen BS - Card-2 by Jon (@Middaugh) on CodePen.

Card Content

Cards have a large number of custom classes that provide a way to have consistent looking content.

• card-title
• card-subtitle
• card-text
• card-link

Markup

    

        
Article 1 title
        
Article 1 subtitle
        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto temporibus voluptatem et repellendus accusantium?
        Read More
        Article Source
    
        

See the Pen BS - Card-4 by Jon (@Middaugh) on CodePen.

Bootstrap Themes

Bootstrap themes are packages of HTML, CSS, and JavaScript that provide a consistent look to your Bootstrap powered website.

Some free themes

Bootstrap Buttons

Bootstrap offers several predefined styles and behaviors. Most are designed around semantic usage.

Button API

Button HTML

Bootstrap button styles can be applied to button, input, and a

Example Buttons

    Primary
    Secondary
    Success
    Danger
    Warning
    Info
    Light
    Dark
    
    Link

In Action

See the Pen BS - Buttons by Jon (@Middaugh) on CodePen.

Forms

Bootstrap provides a great way to style forms and customize their layout.

Bootstrap applies a width of 100% to almost all of their form elements, but can easily be changed with additional classes.

Forms API

Basic Form Components

• form-group - A container for a specific input. Primary purpose is to add spacing between inputs
• col-form-label - Class for dictating a label
• form-control - applies Bootstrap's look and feel to an input.

Markup

This markup generates a stacked form.

  

    Email address
    
  
  

    Example select
    
      1
      2
      3
      4
      5
    
  
  

    Example multiple select
    
      1
      2
      3
      4
      5
    
  
  

    Example textarea
    
  
       
    

See the Pen BS - Forms by Jon (@Middaugh) on CodePen.

Horizontal Forms

You can use Bootstrap's grid system to generate a horizontal form.

    

        Email
        

            
        
    
    

        Password
        

            
        
    

        

See the Pen BS - Form-2 by Jon (@Middaugh) on CodePen.

Validation Styles

There are built in styles to help provide a visual indicator that there are missing fields.

• is-valid
• is-invalid
• invalid-feedback - Validation message. Automatically displays when input has is-invalid. There is a block of JavaScript that executes this. We'll look at it later.

    

        Example label
        
    
    

        Another label
        
        

            Please fill out this input
        
 
    
    
    

See the Pen BS - Form-3 by Jon (@Middaugh) on CodePen.

Tables

Bootstrap has an opt-in approach for styled tables. You must add the class table to a table element to get a styled table

Markup

    

        

        
#
        
First Name
        
Last Name
        
Username
        
    
    

        

            
1
            
Mark
            
Otto
            
@mdo
        
    

        

See the Pen BS - Table by Jon (@Middaugh) on CodePen.

Table Stripes and Borders

You can apply several global styles by using these classes on the parent table

• table-striped - Adds a different background to every other row
• table-bordered - Adds borders to all table cells
• table-hover - Adds a different background when hovering over a row

Contextual Classes

These can be applied to any row or column in a table.

    <table>
            <tr class="table-active">...</tr>
            <tr class="table-primary">...</tr>
            <tr class="table-secondary">...</tr>
            <tr class="table-success">...</tr>
            <tr class="table-danger">...</tr>
            <tr class="table-warning">...</tr>
            <tr class="table-info">...</tr>
            <tr class="table-light">...</tr>
            <tr class="table-dark">...</tr>       
    </table>

See the Pen BS - Table by Jon (@Middaugh) on CodePen.

Images in Bootstrap

There are many classes that apply small changes to images that help make them more mobile friendly.

Fluid Images

The img tag is an inline element by default. Using the class img-fluid forces the element to always take up 100% of the space available ot it.

Image Thumbnails

You can use the class img-thumbnail to apply a 1px border for a better appearance.

Rounded corners

Rounded corners are apart of Bootstrap's Utilities, but you can easily apply them to images for better appearance

See the Pen BS - Images by Jon (@Middaugh) on CodePen.

Utilities

Bootstrap contains a large number of utilities to help with small layout changes.

Text Align

    
Left aligned text on all viewport sizes.
    
Center aligned text on all viewport sizes.
    
Right aligned text on all viewport sizes.
        

Read More

Quick Margins and Padding.

Formula

[property] [sides] - [size]

Read More

Available Values

Properties

• p - padding
• m - margin

Sides (optional)

• t|b|l|r - top, bottom, left or right
• x|y - both sides or top and bottom
• blank - applies to all sides

Size

• 0 - 5
• auto

Examples

• mr-1 - small margin left
• m-5 - large margin on all sides
• mx-auto - left & right auto margin
• p1 - small padding on all sides
• pb-1 - small padding on bottom

Display Utility Classes

• .d-none
• .d-inline
• .d-inline-block
• .d-block
• .d-flex

Dictating Sizes

• .w-25
• .w-50
• .w-75
• .w-100

.w-25 is 25% of what? It's 25% of a SASS variable that you set in your theme.

Questions?

Bootstrap Collapse

Bootstrap's auto configured slide toggle feature.

#1 Benefit?

You can configure it with just HTML

(slide toggle is a technical term)

Collapse API

Syntax

  Link with href
        

 
  Button with data-target

        

Example

See the Pen BS-Collapse by Jon (@Middaugh) on CodePen.

Bootstrap Navigation

Bootstrap's Navigation component takes care of most of the typical scenarios for navigation.

Docs

Structure

• navbar - base class
• navbar-expand-lg - expands at lg breakpoint. Can be sm|md|lg|xl
• navbar-light - applies a black foreground. -dark
• bg-light - applies a light background. -dark, -primary

Main Section

See the Pen BS-Basic Nav by Jon (@Middaugh) on CodePen.

Adding a drop down link

    
        Dropdown link
    
    

        Action
        Another action
        Something else here
    

See the Pen BS-Basic Nav - drop down by Jon (@Middaugh) on CodePen.

Bootstrap Carousel

Bootstrap provides an easy to use Carousel that can be implemented without needing to write any JavaScript.

Carousel API

Carousel Components

• Slides
• Indicators
• Controls

Slides Only

Bootstrap's carousel is based off of images and allow optional captions.

Example

See the Pen BS - Carousel by Jon (@Middaugh) on CodePen.

With Controls

Example with controls

See the Pen BS - Carousel-Indicators by Jon (@Middaugh) on CodePen.

Indicators

Indicators displays what slide is currently active. They are made up from list items.

See the Pen BS - Carousel-Indicators by Jon (@Middaugh) on CodePen.

How might we take this a step further? How about custom css on the indicators.

Captions

    

        
        

            
...
            
...
        
    

See the Pen BS - Carousel-Captions by Jon (@Middaugh) on CodePen.

Bootstrap's Modal

Like many other Bootstrap JavaScript components, can be implemented without needing to code out any JavaScript. You will need to use JavaScript if you need to utilize its more advanced functionality.

Basic Structure

There are three main components needed for the structure of a Bootstrap Modal.

    
    

        ×
        
Modal title
    
    
    

        ...
    
    
    

        Close
        Save changes
    

      

Wrapping content and trigger

    Show Modal




  

    
    
        
    
  

    

Complete

See the Pen UA-BS-Modal-4 by Jon (@Middaugh) on CodePen.

Completed folder is switched.

Exercise 25