Containers

Containers - 1.0

Discussing Containers, containers act is most basic building block within the Bootstrap layout. Although, containers are required, the containers act as a basic container for stuff or wrapper with some generic css styling. Let's cover the various types of containers with screen breakpoints:

• .container - max-width: 100%; responsive breakpoints
• .container-fluid - width:100%; responsive at all breakpoints within the Bootstrap grid
• .container-sm* - width:100% example 'small' class; breakpoint specific

A sample grid has been prepared below, showing the classes available in tabular form, and screen BP (breakpoints in pixels)

Containers: fluid 100% width containing an h1 title and p tag. The container includes a class called border, which adds a small 1 pixel border around the container including padding and margin 'y' which means top and bottom.

Grid Systems

Grid Systems - 1.1

Grids... great, now let's understand what it is. Ideally, we need to create a site, based on a mobile first approach, scaling columns from 1 column to 12 colums. Including various classes

• .col - generic class, ideal for devices that are small, extra-small
• .col-sm-3 .col-md-3 .col-lg-3 .col-xl-3 - including row/column breakpoint

Those of you who have had previous html/css experience you'll notice the use of display'flex' or 'flexbox' which helps devs move toward a device agnostic approach and away forcing divs with floats, text-alignment and clear styles. The mobile approach is first, which is typically 100% of a 'smaller' screen compared to a tabler or desktop. The idea is that the content 'grows' with the increase of available space by device.

Defined Grid: We see the same container, border, h1 title and paragraph as the first example. Next we see the class for 'row' including two container classes indicated by the 'column left' text (col-md-3) and 'column right' (col-md-9). Meaning display two columns within the row, one column 3 sections wide and the second 9 sections wide. Reference the grid-system over on the References for further explaination and/or specifics.

Tables

Tables - 1.2

Not for us devs in the 90's... EVERYTHING was in a table... Unfortunately, tables are still needed and the prefered method of delivering visual data glory. Again, tabular data; easily adjust rows/columns in table form.

• .table - table element
• .table table-dark - table element, with backgrounds: light/dark
• .table table-striped - zebra stripping

Grand Ole' Table: Good ole' fashion tables. We have 3 columns and 3 rows of tabular data. Including some database gargon and some row details to show a complete table.

Jumbotron

Jumbotron - 1.3

The JUMBOTRON, think of the large scoreboards in any sport stadium around the globe. If that doesn't do it for you, think of the billboards, movie marques or any large format printed ad. This jumbotron is synonimous with those adverts. This is the chance to sell your product or service. We included a 'slim version' above on this very page.

• .jumbotron - Jumbotron with breakpoints, similar to the .container classes above
• .jumbotron-fluid - Full width Jumbotron

Jumbo-Tron: Think Big! Think REALLY Big! A big message shared with your customers, the main message. Something new and existing users and arriving to your site might think 'this is it'. Spend sometime reviewing the jumbotron class, along with various examples, media includes and images to push your users experience.

Cards

Cards - 1.3

Cards have replaced the version 3 idea of panels, well cover that here in a second. First, cards, again a flexible container Bootstrap component, which includes headers and footers. Additionally, UI classes for colors, contextual backgrounds, various content and media types.

• .card - class container, or default card class
• .card-body - card body is the meat of the card, assuming 'header', 'body', and footer accompany your inplementation. The body contains other elements below
• .card-header - Header might contain images or text describing the contains of the card
• .card-footer - Footer may also contain images, links or text completing the interaction within the card.
• .card-columns - similar to building blocks, cards appear in equal x/y axis space.
• .card-group - sans margin, where .card-deck might have equal margin between each card container
• .card-deck - grouping of cards on the vertical, in column form

Cards: Here is a great way to provide small chunks of information, products, services and such. Quick consumable 'cards' including or excluding image backgrounds. In this case, we don't share an example where the background of a card acts as a billboard for each card. Looking for an example? Head over to the References page for different card styles, concepts and code to include in your Bootstrap projects.

Nav/Navbar

Nav/Navbar - 1.5

Nav - 1.5.1

How about navigation, need a fast and reliable way to navigation in and around your site. Nav Bootstrap elements include tabs, pills, buttons etc. to help users navigate around web content. Navigation also included full-width, alignment adjustments, dropdown and sub-navigation element.

• .nav - horizontal menu class, without specificing display: box/inline styles.Easy to implement nav class for a simple, clean navigation container offering links or buttons for user interaction.
• .nav-item | .nav-link - include items and links for interaction
• .nav justify-content-end - we did not include all varitions, however, inlcude this class for link alignment at the 'end' of the container
• .nav nav-tabs - tabs can be used as a navigation element to show/hide or drive page navigation.
• .nav nav-tabs nav-item dropdown - tabs with item dropdown/dropup will create the dropdown menu for child links/nav items
• .nav nav-pills - different ui solution where buttons or 'pills' for link items might be applicable. Pills or rounded buttons

Nav: Below is a quick and dirty navigation container, including the use of Font Awesome iconography, links, active and disabled actionable links. This includes an example of how you might use the navigation to log a user into a site.

Nav/Navbar

Nav/Navbar - 1.5

Navbar - 1.5.2

The Bootstrap Navbar allows the developer to add a responsive navigation container for all navigational elements such as the company logo, navigation elements and perhaps add 'user' funcationality to retrieve and interact with online profiles or accounts. This also includes the dropdown menus as shared above so that the mobile first approach scales appropriately to similar devices, tablets and large format devices.

• .navbar - main nav container which allows for 2 treatments, one the typical full length nav and a mobile version which servers up a dropdown at a certain breakpoints. Navbars can contain, links, logos, search boxes etc. All placed to help the user navigate around the page and content collected on your website.
• .navbar .navbar-nav .nav-item - links are container within the nav/items section. Like other sections, color, sizing, alignement and orientation (vertical/horizontal) we've discussed in subsequent sections, this container can be served up as the default, small, medium, large and xlarge versions.
• .nav-item .nav-link - Links include an unorder list (ul) and list item (li) with .nav-link class.
• .navbar-toggler data-toggle="collapse" data-target="#link" - ID contained in the content shall include "#" link, see example
• .collapse navbar-collapse - container where the collapse (show/hide) will take place.
• .nav-link dropdown toggle - container for the sub-child links, sub-child subjects, pages and thoughts.

Navbar: Another example here, example includes branding, parent/child links, a search form with iconography and a place where users can log into an imaginary admin section. The example below includes bg classes, for color, btn classes to change buttons and a toggle experience for tablet and mobile experiences where screen space will be limited.

Scrollspy

Scrollspy - 1.6

Quickly we will cover scrollspy, ideally as a user 'scrolls' down to review content below the fold, "each fold" if you will has an ID named per section. What this little clever class does is 'update' or highlight the link associated with the section that the user is reading. Lots of words there, simply put. As the user scrolls through various sections, the navigation associated with that page or section will be highlighted as 'active'. This assumes multiple sections per page, we target the .navbar class and highlight it's respected section link.

• .data-spy="scroll" data-target=".navbar" data-offset="50" -

Scrollspy: Preloaded Scrollspy example below: We included a barebones template - scrollspy on the body, nav, jumbotron and three supporting sections. This html page is currently housed in an iframe for the purposes of testing the 'scroll' funtion as a user scrolls down the iframe section (w100% x h400px). Be sure to click inside the iframe, and scroll... otherwise the scroll action will remain focused on the main content body and not the iframe nor the content contained within.

Flexbox

Flexbox - 1.7

Building on the idea of responsive, flexible, scalable UI; mobile first view. Bootstrap takes full advantage of the 'flexbox' to dictate layout sans inflexible classes like float or absolute positioning. Flexbox is truly the next gen structure inwhich the content can start and stretch outwardly from the mobile first view. Content flows over the flexbox 'scaffolding' inline (left to right without css classes to force elements inline or vertical) when screen space is limited or infinite. The good thing here is, we've provided examples throughout the site taking full advantage of the flexbox structure. More on Flexbox classes can be found on the 'references' section of the site where we go into further detail.

• .d-flex - flexbox container, engaging the flexible container layout sans floats and positions defined in absolute.
• .d-flex - flexbox inline similar to ul inline for navigation containers of old
• .flex-row - rows display on the x-axis, in a horizontal layout
• .flex-row-reverse - row display in reverse on the x-axis
• .flex-column - conversely, columns display on the vertical, y-axis
• .flex-column-reverse - columns display in reverse on the y-axis
• .justify-content-center - containers flex in a justified manner, centered
• .justify-content-between - containers flex again in a justtifed manner, giving space between container in porportial or equalized fashion.
• .flex-fill - containers flex equal to the width portions of the screen or device screen widths

Flexbox: We will show 4 specific examples noted below even though there are far more examples to cover here as we build container types included in the flexible box structure. We will cover those in the Reference section. For now, we want to show a few examples using the d-flex class and a few examples that might work when using Bootstrap 4 as a beginner on up. Again, lots of examples on the References page here.

Inputs, Input Groups & Custom Forms

Inputs - 1.8.1

Inputs, need inputs and input groups inorder to interact and submit forms just covered above. There are a few ways to handle form controls or form inputs. Input text boxs and textareas for alphanumerical text entry. Checkboxes for selection or limiting what is being shared. Also, radio buttons, similar to checkboxes in addition to multiple selections. And finally, the ability to select elements within a form. Lables can be used to describe form elements/inputs describing the purpose of the inputs by form.

Text, Password and Textarea inputs - (Form-Control)

• type="text" .form-control - Plaintext input type including form-control where the dev has the ability to adjust sizing and 'screen portion' for each form input See Form groups below.
• type="password" .form-control - Similar to text above, Bootstrap 4 adheres to precendent set by HTML standards and HTML input types
• textarea .formcontrol
• .form-control-plaintext - Add 'text' or 'plaintext' to describe areas for the form or add language on how to use the form. Try adding the plaintext class for further information.
• form-control-sm - Small
• form-control - Default sizing, padding and margin for form elements
• form-control-lg - Large

Checkbox, Radio inputs - (Form-Check-Inputs)

• .form-check - We use 'form-check' class for check 'options' or predefined selections inorder to filter content into the system.
• type="checkbox" .form-check-input - See both of the following examples, input contained within 'form-check'. Two, include checkbox types and how the form elements are placed on the screen. Here we have a generic checkbox that will show on the x-axis
• type="checkbox" .form-check-inline - Here we have an example where the inputs will be arranged on the y-axis
• type="radio" .form-check-input - Similar to the checkbox inputs, radios can be placed on the x-axis, inline, and disabled. We will discuss the disabled options below.

Dropdown List, Select Items List - (Form-group)

• .form-group - At it's core is the list functionality, the grouping class is used to maintain items in list form and allows the user to select n-to-many
• .form-group select class option - example showing all classes inorder to properly show a dropdown list

Ranges (metered values) and File Inputs or Uploads

• type="range" class="form-control-range" - Default range, full width. For other range examples, including JS to show values and slider numbers. Check out the reference section for those details.
• type="file" class="form-control-file border" - Uploades will also be covered in further detail under the references section

Inputs: Need Looking to add form functionality to your websites, the functionality of requesting inputs and outputs.

Input Groups

Input Groups - 1.8.2

Inputs Groups, next we can focus on input groupings a la .input-group, which allows both inconography and input fields to share text areaa. Example would be our email request, where we request an email with a paper plane and 'send' button. We wil provide a second example below. Building on the inputs described above, we will build of each in the same order, skipping 'size'.

• .input-group - Adding both text and interaction 'buttons' to field level elements.
• .input-group-prepend | .input-group-append - Add classes to append text pre/post text input
• .input-group-text - Text to be displated pre/post input

Flexbox: Paragraph.

Custom Forms

Custom Forms - 1.8.3

Custom Forms, Customer Switch, custom inputs covered below. Also, we will cover an example of upload.

• .custom-control - container wrappers allows for new custom control over your inputs, input groups etc. for 'expressed' experiences beyond the default, further deepening customer experiences across device types.
• .custom-checkbox - checkbox customization
• .custom-control-label - label customization
• .custom-control-input - input customization
• .custom-range - range customization

Flexbox: Paragraph.