Responsive Layout with Twitter Bootstrap:
buttons, nav bars, drop-downs, breadcrumbs, site maps, anchors, accordions, etc.
- Built into Bootstrap are a number of reusable elements, conveniently styled out with accompanying JS to easily add components such as navigations, alerts, dropdowns, buttons, responsive tables, lists, responsive media objects, and more!
- There are over 20 different Bootstrap components that can be found here: https://getbootstrap.com/docs/4.0/components/alerts/
Components need: - Bootstrap CSS, jQuery, Popper.js, Bootstrap.js
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head>
- Bootstrap has eight colors designed to indicate to the user what they should do without words
- These colors are added to component classnames and will add the color to the component
- This is customizable
- These colors are:
- 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 to
<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.
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.
w-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.
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/
- The jumbotron component adds a hero image to the top of your website. This markup is relatively simple, but very useful, as a majority of websites today use hero images on their homepage.
<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Fluid jumbotron</h1> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> </div> </div>
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
Cards Code Examples
- This card will appear full width, unless you add additional styles or classes to the card element, such as
col-sm-6. In a previous lesson we covered the column based classes and how to set a given width to a element.
<div class="card"> <div class="card-header"> Featured </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div>
<div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>
Bootstrap Examples and Themes
- Bootstrap offers a number of simple, modular page layouts that you can use and tweak for your own needs. This is certainly helpful for quickly deploying a complete Bootstrap website in a timely manner.
- This way, you don't need to write all the markup from scratch - Bootstrap developers have already done a majority of the legwork for you.
These examples can be found at: https://getbootstrap.com/docs/4.0/examples/
Themes, which are basically fully styled and coded websites, can be purchased from https://themes.getbootstrap.com/. However, I do not recommend this, as you should now be able to replicate just about every theme, using the resources and components above, for free.