Containers

Content Blocks, Fluid or Breakpoint specific.

We cover the container classes: Containers, Grid System, Tables, Jumbotron, Nav | Navbars, and Utilities.

Bootstrap 4 - Containers

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)


Container Classes by screen width breakpoints
Container Class BP (breakpoints) Grid: bp 1 - <576px bp 2 - ≥576px bp 3 - ≥768px bp 4 - ≥992px bp 5 - ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%
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.

H1 Title Text

Paragraph text, add some text here!


H1 Title Text

Paragraph text, add some text here!

Code Snippet - Containers

<div class='example border p-5'>
<div class='container-fluid border p-5 bg-dark text-white'>
<h1>H1 Title Text</h1>
<p>Paragraph text, add some text here!</p>
</div>
</div>

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.


span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12
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.

H1 Title Text

Paragraph text, unbalanced column widths

Column left
Column right

H1 Title Text

Paragraph text, 4 balanced columns

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

Code Snippet - Grid Systems

<div class='container-fluid'>
<h1>H1 Title Text</h1>
<p>Paragraph text, 4 balanced columns</p>
<div class='row'>
<div class='col-sm-3'>.col-sm-3</div>
<div class='col-sm-3'>.col-sm-3</div>
<div class='col-sm-3'>.col-sm-3</div>
<div class='col-sm-3'>.col-sm-3</div>
</div>
</div>

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.

ID Number Key
1 1.1 A.1
2 1.2 A.2
3 1.3 A.3

ID Number Key
1 1.1 A.1
2 1.2 A.2
3 1.3 A.3

ID Number Key Machine IP Address OS Type Age
1 1.1 A.1 HP Z400 10.0.0.1 Win 7 6.1 Workstation Server 2010
2 1.2 A.2 Raspberry Pi4 B 10.0.0.2 RedHat Ent 8 IoT - Connectivity Device 2018
3 1.3 A.3 Mac Pro 10.0.0.3 Macos 11.2 Laptop 2019
3 1.4 A.4 Linux Generic 10.0.0.4 Ubuntu 21.04 Laptop 2021
3 1.5 A.5 Linux Generic 10.0.0.5 Ubuntu 20.04.2.0 Laptop 2018

Code Snippet - Tables

<div class='container-fluid'>
<div class='table-responsive'>
<table class='table table-responsive-sm table-striped'>
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th>Key</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>1.3</td>
<td>A.3</td>
</tr>
<tr>
<td>3</td>
<td>1.3</td>
<td>A.3</td>
</tr>
<tr>
<td>3</td>
<td>1.3</td>
<td>A.3</td>
</tr>
</tbody>
</table>
</div>
</div>

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.

Borg2Borg

Some Exciting Text, ALL CAPS OF COURSE!

Consider the Bootstrap Framework
More Bootstrap specifics both Version 4 & 4 examples.

Bootstrap

Code Snippet - Jumbotron

<div class='example border p-5'>
<div class='jumbotron text-center bg-dark'>
<h1><i class='fas fa-microchip'></i>Borg2Borg</h1>
<h4 class='turquoise'>Some Exciting Text, ALL CAPS OF COURSE!</h4>
<p>Consider the Bootstrap Framework<br>
More Bootstrap specifics both Version 4 & 4 examples.</p>
<p><a href='getbootstrap.com' target='_blank' class='btn btn-primary'>Bootstrap</a></p>
</div>
</div>

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.

Card: Secondary title text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card: Secondary title text

Vestibulum id metus ac nisl purus in suspendisse.

Card: Secondary title text

Pulvinar leo id risus enim. Bibendum pellentesque malesuada in.

Code Snippet - Cards

//add more cards to the deck below
<div class='example border p-5'>
<div class='container-fluid'>
<div class='row d-flex justify-content-center'>
<div class='card-deck'>
<div class='card mb-3'>
<div class='card-body'>
<h5 class='card-title'><i class='fas fa-clipboard'></i> Card: <small>Secondary title text</small></h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
<div class='card-footer'>
<small class='text-muted'>Last updated 3 mins ago</small>
</div>
</div>

</div>
</div>

</div>
</div>



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.

Code Snippet - Scrollspy

<div class='example border p-5'>
<div class='container-fluid'> <div class='embed-responsive embed-responsive-16by9'> <iframe class='spytest' src='spy.html'></iframe> </div>
</div>
</div>

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.

Box 1
Box 2
Box 3

Box 1
Box 2
Box 3

Box 1
Box 2
Box 3

Box 1
Box 2
Box 3

Code Snippet - Flexbox

<div class='example border p-5'>
<div class='container-fluid'>
<div class='d-flex'>
<div class='p-4 m-2 bg-lightTurquoise flex-fill'>Box 1</div>
<div class='p-4 m-2 bg-turquoise flex-fill'>Box 2</div>
<div class='p-4 m-2 bg-dark text-white flex-fill'>Box 3</div>
</div>
</div>
</div>
</div>

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.

- Enter Login Credentials -


- Please Provide Your Feedback -


Code Snippet - Inputs

<div class='example border p-5'>
<div class='container-fluid'>
<form> <p>- Enter Login Credentials -</p> <div class='mb-3'> <label for='staticEmail' class='col-form-label'>Email</label> <input type='text' class='form-control' id='staticEmail' placeholder='Password:'> </div>
<div class='mb-3'> <label for='inputPassword' class='col-form-label'>Password:</label> <input type='password' class='form-control' placeholder='Password:' id='inputPassword'> </div>
<div class='mb-3'> <input type='text' class='form-control-plaintext' placeholder='Before You Submit, check your Username (email) and Password.'> </div>
<div class='my-4'> <button type='submit' class='btn btn-primary'>Submit</button> </div>
</form> <hr> <form> <p>- Please Provide Your Feedback -</p> <div class='mb-3'> <label for='staticText' class='col-form-label'>Name</label> <input type='text' class='form-control' id='staticText' placeholder='Name:'> </div>
<div class='form-check-inline'> <label class='form-check-label'> <input type='checkbox' class='form-check-input' value=''>Product</label> </div>
<div class='form-check-inline'> <label class='form-check-label'> <input type='checkbox' class='form-check-input' value='' >Services</label> </div>
<div class='form-check-inline'> <label class='form-check-label'> <input type='checkbox' class='form-check-input' value='' >Other</label> </div>
<div class='mb-3 form-check-inline'> <label class='form-check-label'> <input type='checkbox' class='form-check-input' value='' disabled>Something Else</label> </div>
<div class='mb-3 form-group'> <label for='list'>Selection list:</label> <select class='form-control' id='list'> <option>Call</option> <option>Email</option> <option>Text</option> <option>Mail (USPS Shipping to be paid by customer)</option> </select> </div>
<div class='mb-3 form-group'> <label for='customRange12' class='form-label'>Customer Satisfaction 1 to 5 (5 - Satisfied, 1 - UnSatisfied)</label> <input type='range' class='form-range' id='customRange12'> </div>
<div class='mb-3 form-group'> <label for='comment'>Feedback:</label> <textarea class='form-control' rows='5' placeholder='Enter text, include communication preference i.e. 555-0100.' id='comment'></textarea> </div>
<div class='my-4'> <button type='submit' class='btn btn-primary'>Submit</button> </div>
</form>
</div>
</div>

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.

- Append text to inputs for customized inputs, including greater visibility 'value' when directing users to provide specifics -

@
@example.com
Person
$
.00

Code Snippet - Flexbox

<div class='example border p-5'>
<div class='container-fluid'>
<form> <p>- Append text to inputs for customized inputs, including greater visibility 'value' when directing users to provide specifics -</p> <label for='exampleText' class='form-label'>Enter Username:</label> <div class='input-group mb-3'> <div class='input-group-prepend'> <span class='input-group-text'>@</span> </div>
<input type='text' class='form-control' id='exampleText' placeholder='Username'> </div>
<div class='input-group mb-3'> <input type='text' class='form-control' placeholder='Your Email'> <div class='input-group-append'> <span class='input-group-text'>@example.com</span> </div>
</div>
</form> <form> <div class='input-group mb-3'> <div class='input-group-prepend'> <span class='input-group-text'>Person</span> </div>
<input type='text' class='form-control' placeholder='First Name'> <input type='text' class='form-control' placeholder='Last Name'> </div>
</form> <form> <div class='input-group mb-3'> <div class='input-group-prepend'> <span class='input-group-text'>$</span> </div>
<input type='text' class='form-control' placeholder='XXX'> <div class='input-group-prepend'> <span class='input-group-text'>.00</span> </div>
</div>
</form> <form> <div class='input-group mb-3'> <div class='input-group-prepend'> <div class='input-group-text'> <input type='checkbox'> </div>
</div>
<input type='text' class='form-control' placeholder='Some text'> </div>
</form> <form> <div class='input-group mb-3'> <div class='input-group-prepend'> <div class='input-group-text'> <input type='radio'> </div>
</div>
<input type='text' class='form-control' placeholder='Some text'> </div>
</form> </div>
</div>

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.






Code Snippet - Custom Forms

<div class='example border p-5'>
<div class='container-fluid'>
<form> <div class='mb-3'> <div class='form-check'> <input class='form-check-input' type='checkbox' value='' id='flexCheckDefault'> <label class='form-check-label' for='flexCheckDefault'> Default checkbox </label> </div>
<div class='form-check'> <input class='form-check-input' type='checkbox' value='' id='flexCheckChecked' checked> <label class='form-check-label' for='flexCheckChecked'> Checked checkbox </label> </div>
</div>
</form> <hr> <form> <div class='mb-3'> <div class='form-check'> <input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault1'> <label class='form-check-label' for='flexRadioDefault1'> Default radio </label> </div>
<div class='form-check'> <input class='form-check-input' type='radio' name='flexRadioDefault' id='flexRadioDefault2' checked> <label class='form-check-label' for='flexRadioDefault2'> Default checked radio </label> </div>
</div>
</form> <hr> <form> <div class='mb-3'> <div class='form-check form-switch'> <input class='form-check-input' type='checkbox' id='flexSwitchCheckDefault'> <label class='form-check-label' for='flexSwitchCheckDefault'>Default switch checkbox input</label> </div>
<div class='form-check form-switch'> <input class='form-check-input' type='checkbox' id='flexSwitchCheckChecked' checked> <label class='form-check-label' for='flexSwitchCheckChecked'>Checked switch checkbox input</label> </div>
</div>
</form> <hr> <form> <div class='mb-3'> <div class='form-check form-switch'> <input class='form-check-input' type='checkbox' id='flexSwitchCheckDisabled' disabled> <label class='form-check-label' for='flexSwitchCheckDisabled'>Disabled switch checkbox input</label> </div>
<div class='form-check form-switch'> <input class='form-check-input' type='checkbox' id='flexSwitchCheckCheckedDisabled' checked disabled> <label class='form-check-label' for='flexSwitchCheckCheckedDisabled'>Disabled checked switch checkbox input</label> </div>
</div>
</form> <hr> <form> <div class='mb-3'> <label class='customRange'>New Range:</label> <input type='range' class='custom-range' id='customRange' name='points4'> </div>
</form> <hr> <form> <div class='mb-3'> <label class='optionsMore'>New Selection List:</label> <select name='options' class='custom-select'> <option selected>Custom Select Menu</option> <option value='opt1'>Option 1</option> <option value='opt2'>Option 2</option> <option value='opt3'>Option 3</option> <option value='opt4'>Option 4</option> <option value='opt5'>Option 5</option> </select> </div>
</form> <!-- Added for file name --> <script> // Add the following code if you want the name of the file appear on select $('.custom-file-input').on('change', function() { var fileName = $(this).val().split('\').pop(); $(this).siblings('.custom-file-label').addClass('selected').html(fileName); }); </script> </div>
</div>
Global Airtraffic

Need Help? How might we help? Connect with us, reach out via email, phone or contact form