How to use Bootstrap

How to use Bootstrap

Bootstrap classes are able to be referenced inside Infiniti forms to enhance the look and feel of the project. In order to use a bootstrap class you will need to create a label. Go to Source Code in Design and type in the following syntax of your choosing from below.


Alerts create a large colored bubble to display information in a way that stands out.
The syntax is:
<div class="alert alert-insert>Text of your choice</div>

Options are: success, info, warning, and danger.


Similar to a label this will insert a round label onto the form.
The syntax is:
<span class="badge">Text of your choice</span>


The breadcrumb class makes a list look like a navigational plane, separating each item with a backslash and listing the items horizontally.
The syntax is:
<ol class="breadcrumb">
<li>Item of your choice</li>
<li>Item of your choice 2</li>

Contextual background

Contextual background turns the background of the text into a specific color.
This syntax is:
 <p class="bg-insert">Text of your choice</p>

Background options are: success, info, warning, and danger. 
Contextual colors turns the text into a specific color to signify what the text means.
The syntax is:
<p class="text-insert">Text of your choice</p>

The bold text can be changed to give the text a different color. Examples for the contextual color classes are: muted, primary, success, info, warning, and danger.


Glyphicons can insert a small icon of your choice.
The syntax is:
<span class="glyphicon glyphicon-insert"></span>

Example options are: envelope, search and print. For the full list of available Glyphicons link here.


Creates a large box around the text and greatly increasing the size to help the text stand out.
The syntax is:
<div class="jumbotron">Text of your choice</div>


The label class will insert a colored label onto the form.
The syntax is:
<span class="label label-insert">Text of your choice</span>


Listgroups are a way to color a html list. The syntax is:
<ul class="list-group">
<li class="list-group-item list-group-item-insert">Text of your choice</li>

The color options are: success, info, warning, and danger.


The Panel class will display a window with a title and body text beneath it. The syntax is:
<div class="panel-group">
<div class="panel panel-insert">
<div class="panel-heading">Heading of your choice</div>
<div class="panel-body">Body text of your choice</div>
The color options are: default, primary, success, info, warning, and danger.
This class will make odd rows and even rows have a different colorred background. This helps distinguish each row.
The syntax is:
<table class="table table-striped">
<td>Text if your choice></td>
<td>Text if your choice></td>


Create a bubble around the text to look like text has been inserted.
The syntax is:
<div class="well">Text of your choice</div>

Additional Information

If you would like to learn more about bootstrap classes or see bootstrap classes in action.

Related Articles