Bootstrap Styles

Bootstrap Contextual Classes

Bootstrap provides a set of contextual classes to help a designer bring attention to certain elements. Each class has a color and associated meaning. Imported themes can change these colors to better fit a site design, but the default colors/meanings are as follows:
Designers often use these classes within a theme to help keep colors consistent throughout a site.

When applying the contextual classes, each element has its own way to call them as you will see below. However, to apply them generally to text, use .text-class where class is the name of the contextual class. Similarly, they can be applied as the background color of any element using .bg-class. Bootstrap 4.0 also offers contextual classes for .secondary, .dark, .light, and .white.

Images

One of the tricky elements in responsive design is re-sizing images to fit the current display size. Luckily, Bootstrap provides a class that handles this: .img-fluid. Applying this class to an image makes it automatically resize and scale to better fit its parent element. Using this class treats the image as a block level element, so to center, it is better to use the .center-block class as opposed to text-align:center.

Bootstrap also provides a few quick formatting classes to better help display images on a page in a fashionable style. These classes are as follows:


.rounded

Creates a rounded rectangle mask around the image

.rounded-circle

Creates a circular mask around the image

.img-thumbnail

Fits the image into a framed thumbnail

In each case, the images were styled to have the same width and height. This is not necessary if you are looking for rectangular or oval shapes.
Bootstrap 4.0 introduces the use of border contextual classes such as border-primary, border-secondary, etc. Each needs to start with the straight .border class. Additionally, Bootstrap 4 offers other rounding options includeing rounded-top, rounded-right, rounded-left, and rounded-bottom.

Buttons


The Bootstrap button class (.btn) can be applied to the a, button or input elements. However, for cross platform compatibility, the button object is preferred. The default button class, creates a rounded corner button that can be linked to other pages or javascript code.

Once identified as having the basic button characteristics, a variety of additional classes can be utilized: As always, these classes can be combined to create a variety of effects on a singular button.
Bootstrap 4 adds additional styles to take some of the weight from the heavy coloring associated with button backgrounds. These classes use btn-outline-color to produce a new button outline look.

Tables

The base class for a table in Bootstraop is .table. Once applied to a table, the following additions can be used to augment the table design:

.table-striped - alternated striped rows in the table

col 1col 2col 3
cell 1ce11 2cell 3
cell 4cell 5cell 6

.table-bordered - draws borders around all cells in the table

col 1col 2col 3
cell 1ce11 2cell 3
cell 4cell 5cell 6

.table-hover - alters the style of the row the user is hovering over

col 1col 2col 3
cell 1ce11 2cell 3
cell 4cell 5cell 6

.table-sm - takes away excess padding in the cells of the table

col 1col 2col 3
cell 1ce11 2cell 3
cell 4cell 5cell 6

.table-responsive - adds a srcollbar when the display gets too small. Used by wrapping the table in a div with the table-responsive class. Bootstrap 4 offers extended options in building responsive tables. Check out getBootstrap.com for more information.

col 1col 2col 3
cell 1ce11 2cell 3
cell 4cell 5cell 6
Bootstrap 4 offers more control over tables styles with the use of coloring. The table-color classes will use the contextual colors to shade either rows or cells. Additionally, the entire table can be styled in a dark format using the table-dark class on the original table tag. Finally, when creating the table, if the header rows and body are enclosed by the thead and tbody tags, the .thead-light and .thead-dark classes can be applied to give the header rows a different look and feel.

Forms

Bootstrap form elements are set to 100% width by default. In other words, each input/label pair creates a block level element. This is often accomplished using the .form-group class. This class helps arrange the necessary spacing and formatting for form elements and their labels. Also, for usage reasons, all form elements (input, etc) should implement the .form-control class. For example: 
<form>
     <div class='form-group'>
	   <label for='username'>Username:</label>
	   <input type='text' 
		  id='username' 
		  class='form-control'
		  placeholder='Username' />
     </div>
     <div class='form-group'>
	   <label for='password'>Password:</label>
	   <input type='password' 
		  id='password' 
		  class='form-control' 
		  placeholder='Password' />
     </div>
     <button class='btn btn-success'>Submit</button>
</form>
New to Bootstrap 4.0 is the addition of the .form-check class for checkboxes and radio buttons, replacing .form-control in these instances. In the case of using form-check classes, the input and label inside the form-check can be styled using form-check-input and form-check-label. This typically places each option on its own line. To lay form-check options next to each other on the same line, use the .form-check-inline class on the wrapping elements.

To make your form elements work in a single line, instead of as block elements, apply the .form-inline to the form.

<form class='form-inline'>
     <div class='form-group'>
	   <label for='username'>Username:</label>
	   <input type='text' 
		  id='username' 
		  class='form-control'
		  placeholder='Username' />
     </div>
     <div class='form-group'>
	   <label for='password'>Password:</label>
	   <input type='password' 
		  id='password' 
		  class='form-control' 
		  placeholder='Password' />
     </div>
     <button class='btn btn-success'>Submit</button>
</form>

Finally, forms can implement the same grid-system as rows if the form class is set to .form-row. This treats each form-group like a row. Then, the label element can have a col class applied and we wrap a div with a col class around the input element.