Description
buttons, nav bars, drop-downs, breadcrumbs, site maps, anchors, accordions, etc.
Topics
Bootstrap-ComponentsSlides
Alerts
- When an action is completed on your site, such as a form submission, you may want to bring the user to a page with an alert message. To add a role, you can simply include the following code, and change the class.
- Note that the
alertis in addition toalert-primary
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
- The following classes are available for different colored alerts.
| Class | Alert Color |
|---|---|
| alert-primary | blue |
| alert-secondary | grey |
| alert-success | green |
| alert-danger | red |
| alert-warning | yellow |
| alert-info | teal |
Buttons
- Similarly, buttons can be added with the same colors. The classes for buttons are similar to the alert classes for continuity. The following code will add a button to your web page:
<button type="button" class="btn btn-primary">Primary</button>
- As you can see, this also uses the language 'primary', as a descriptor. This will result in a button that is the same color as the alert-primary component. The following classes/button styles are available for use in Bootstrap 4:
| Class | Button Color |
|---|---|
| btn-primary | blue |
| btn-secondary | grey |
| btn-success | green |
| btn-danger | red |
| btn-warning | yellow |
| btn-info | teal |
- You can also modify the class so the button is 'hollow', or rather, has a transparent background, with a colored border and text. This is done simply by changing
btn-primarytobtn-outline-primary.
<button type="button" class="btn btn-outline-primary">Primary</button>
- Note that Bootstrap uses the semantic
<button>element, rather than just a div with the class 'btn-primary'. This is necessary for all of the default Bootstrap styling to be applied, so try not to forget! Bootstrap typically uses semantic HTML elements when possible.
Carousel
Bootstrap offers pre-packaged image carousels that can be added to the header (or elsewhere) on your website. This component has a lot of different options and attributes, such as pagination (slide indicators), controls (left/right arrows for scrolling through photos), thumbnails, and captions.
Carousels tend to me a more intricate and complicated Bootstrap component, so lets break down the relatively simple markup below:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
- This code will add a carousel, with three different images.
d-blockandw-100are classes that override the default image behavior in your browser, and force the image to be full-width and responsive. - You can see the
carousel-controlelements, which add left and right arrows to the slideshow. - The
sr-onlyclasses are for screen readers. - More classes and attributes for the carousel component can be found at: https://getbootstrap.com/docs/4.0/components/carousel/
Cards
Cards can be useful when trying to create a blog-like layout, with images and text within the same wrapper.
Cards will appear full width, unless you add additional styles or classes to the card element, such as
col-sm-4.