What is Bootstrap?

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. You can use Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery with Bootstrap.

To use Bootstrap, you need to copy-paste a link inside the head of your page to load the CSS of Bootstrap and some scripts to load the JavaScripts functions

Classes on Bootstrap

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. You can use Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery with Bootstrap.
To use Bootstrap, you need to copy-paste a link inside the head of your page to load the CSS of Bootstrap and some scripts to load the JavaScripts functions:
  • Inside tags, in your head link href, paste this: https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
  • Inside script tag href, paste this: https://code.jquery.com/jquery-3.4.1.slim.min.js
  • Inside script tag href, paste this: https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
  • Inside script tag href, paste this: https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
alert-primary
  • Prints a blue alert message in the screen.
  • Inside the tags you need to add this: class="alert alert-primary" role="alert"
alert-warning
  • Prints a yellow alert on the screen.
  • Inside the tags you need to add this: class="alert alert-warning" role="alert"
alert-light
  • Prints a grey transparent alert on the screen.
  • Inside the tags you need to add this: class="alert alert-light" role="alert"
Badges
Badges can be used as part of links or buttons to provide a counter.
badge-primary
  • Creates a blue badge to provide a primary counter
  • Inside the tags you need to add this: class="badge badge-primary"
  • badge-primary
badge-info
  • Creates a turquoise badge to provide a information counter
  • Inside the tags you need to add this: class="badge badge-info"
  • badge-info
badge-success
  • Creates a green badge to provide a succesful counter
  • Inside the tags you need to add this: class="badge badge-success"
  • badge-success
Buttons
Buttons are used for actions in forms, dialogs, and more. The .btn classes are designed to be used with the button element.
btn-light
  • Create a white button
  • Inside the tags you need to add this: class="btn btn-light"
btn-warning
  • Create a yellow button
  • Inside the tags you need to add this: class="btn btn-warning"
btn-danger
  • Create a red button
  • Inside the tags you need to add this: class="badge badge-info"
Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options
card
  • Card creates a little panel with the possibility of adding information like titles, subtitles, etc... inside it
  • Inside a img tag you need to add this: class="card"
card-body
  • Card-body creates a little panel with the possibility of adding a text content inside it
  • Inside a img tag you need to add this: class="card-body"
card-img-top
  • Inside a div with a card class, this class add one image on the top of the card panel
  • Inside a img tag you need to add this: class="card-img-top"
An Example
Placeholder

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

Carousel
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.
carousel slide
  • A sliding carousel
  • Inside the tags you need to add this: class="carousel slide"
An Example
Dropdown
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
dropdown
  • Dropdown deploy a menu under the dropdown button
  • This is a code example:
        
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">
                Dropdown
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <a class="dropdown-item" href="#!">Action</a>
                    <a class="dropdown-item" href="#!">Another action</a>
                </div>
            </div>
        
    
dropright
  • Dropright deploy a menu at the right of the dropdown button
  • This is a code example:
        
            <div class="btn-group dropright">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropright
                </button>
                <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                </div>
            </div>
        
    
dropleft
  • Dropleft deploy a menu at the left of the dropdown button
  • This is a code example:
        
            <div class="btn-group dropleft">
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropright
                </button>
                <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                </div>
            </div>
        
    
Form
Add a form visual style
form-inline
  • Creates a form with the inputs in the same line
  • Inside a div tag you need to put this code: class="form-inline"
readonly
  • Makes an input tag to only be able to read it and not write on it
  • Inside a input tag put readonly, for instance: <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
form-control-file
  • Serves as the point of connection between the user and the server to add files
  • In a input tag with type file, you need to put this code: class="form-control-file"