Snippets

    Snippets

    Extension Snippets:

    Alert Snippets

    Alert: Success

    Success! Indicates a successful or positive action.

    HTML for Snippet: Alert Success


    <div class="alert alert-success">
      <p><strong>Success!</strong> Indicates a successful or positive action.</p>
    </div>

    Alert: Info

    Info! Indicates a neutral informative change or action.

    HTML for Snippet: Alert Info


    <div class="alert alert-info">
      <p><strong>Info!</strong> Indicates a neutral informative change or action.</p>
    </div>

    Alert: Warning

    Warning! Indicates a warning that might need attention.

    HTML for Snippet: Alert Warning


    <div class="alert alert-warning">
      <p><strong>Warning!</strong> Indicates a warning that might need attention.</p>
    </div>

    Alert: Danger

    Danger! Indicates a dangerous or potentially negative action.

    HTML for Snippet: Alert Danger


    <div class="alert alert-danger">
      <p><strong>Danger!</strong> Indicates a dangerous or potentially negative action.</p>
    </div>

    Box Snippets

    ×

    Boxes

    Boxes are the easiest way to divide your page into attractive and easy-to-follow sections. In addition, use a box to keep similar content contained in a region of your webpage.

    Box: White

    This box is white.

    HTML for Snippet: White Box


    <div class="col-white-bg">
    <p>This box is white.</p>
    </div>

    Box: Blue

    This box is blue.

    HTML for Snippet: Blue Box


    <div class="col-blue-bg">
    <p>This box is blue.</p>
    </div>

    Box: Gray

    This box is gray.

    HTML for Snippet: Gray Box


    <div class="col-gray-bg">
    <p>This box is gray.</p>
    </div>

    Column Snippets

    ×

    Columns have many possibilities

    While the samples below show even columns which are divided into halves, thirds or quarters, you can actually have up to twelfths! You can even mix-and-match the columns and have them vary depending on the size of the screen which is viewing the columns. This is all part of the "Bootstrap Grid." Learn More

    2 Columns

    Column 1 of 2

    Input text, an image, or anything you would like into this column.

    Column 2 of 2

    Input text, an image, or anything you would like into this column.

    HTML for Snippet: 2 Columns


    <div class="row">
       <div class="col-sm-6">
          <p>Column 1</p>
       </div>
       <div class="col-sm-6">
          <p>Column 2</p>
       </div>
    </div>

    3 Columns

    Column 1 of 3

    Input text, an image, or anything you would like into this column.

    Column 2 of 3

    Input text, an image, or anything you would like into this column.

    Column 3 of 3

    Input text, an image, or anything you would like into this column.

    HTML for Snippet: 3 Columns


    <div class="row">
       <div class="col-sm-4">
          <p>Column 1 of 3</p>
       </div>
       <div class="col-sm-4">
          <p>Column 2 of 3</p>
       </div>
       <div class="col-sm-4">
          <p>Column 3 of 3</p>
       </div>
    </div>

    4 Columns

    Column 1 of 4

    Input text, an image, or anything you would like into this column.

    Column 2 of 4

    Input text, an image, or anything you would like into this column.

    Column 3 of 4

    Input text, an image, or anything you would like into this column.

    Column 4 of 4

    Input text, an image, or anything you would like into this column.

    HTML for Snippet: 4 Columns


    <div class="row">
        <div class="col-sm-3">
            <p>Column 1 of 4</p>
        </div>
        <div class="col-sm-3">
            <p>Column 2 of 4</p>
        </div>
        <div class="col-sm-3">
            <p>Column 3 of 4</p>
         </div>
         <div class="col-sm-3">
            <p>Column 4 of 4</p>
        </div>
    </div>

    Button Snippets

    ×

    Buttons have many possibilities

    The samples below show buttons which are simply white (default) and blue (primary). However, there are other buttons which you can select. With some basic HTML, you can also make the buttons small or large, or even full-width, or disable the button altogether!Learn More

    Button: White

    White Button

    HTML for Snippet: White Button


    <p><a class="btn btn-default" href="#">Button&nbsp;</a></p>

    Button: Blue

    Blue Button

    HTML for Snippet: White Button


    <p><a class="btn btn-primary" href="#">Button&nbsp;</a></p>

    Panel Snippets

    PANELS

    Panels are a convenient way to organize your page into different sections.

    Panel: White

    Panel Heading

    Panel Content

    HTML for Snippet: White Panel


    <div class="panel panel-default">
      <div class="panel-heading">
        <h4>Panel Heading</h4>
      </div>
      <div class="panel-body">
        <p>Panel Content</p>
      </div>
    </div>

    Panel: Blue

    Panel Heading

    Panel Content

    HTML for Snippet: Blue Panel


    <div class="panel panel-primary">
      <div class="panel-heading">
        <h4>Panel Heading</h4>
      </div>
      <div class="panel-body">
        <p>Panel Content</p>
      </div>
    </div>

    Collapsible Button Snippets

    COLLAPSIBLE BUTTONS

    Kirk you can say some stuff about collapsible buttons here if you feel so inclined

    Collapsible Button: White

    HTML for Snippet: White Collapsible Button


    <button data-toggle="collapse" data-target="#demo" class="btn btn-default">Collapsible</button>

    <div id="demo" class="collapse">
    <p>Text hidden within the collapsible button will appear here when clicked.</p>
    </div>

    Collapsible Button: Blue

    HTML for Snippet: Blue Collapsible Button


    <button data-toggle="collapse" data-target="#demo2" class="btn btn-primary">Click Me</button>

    <div id="demo2" class="collapse">
    <p>Text hidden within the collapsible button will appear here when clicked.</p>
    </div>

    Accordion Snippet

    THE ACCORDION

    Do you have content which seems to go on for ages, and you know most of it may not be relevant to somebody who is searching for something specific? Simplify by using an accordion! It makes it easy to find the right content, and expand the content for a simple and intuitive experience (without reading miles of text).

    Accordion Buttons

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    HTML for Snippet: Accordion Buttons


    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"href="#collapse1">
            Collapsible Group 1</a>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p></div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"href="#collapse2">
            Collapsible Group 2</a>
          </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
          <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p></div>

        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"href="#collapse3">
            Collapsible Group 3</a>
          </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse">
          <div class="panel-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
          commodo consequat.</p></div>

        </div>
      </div>
    </div>

    Tabbed Content Snippets

    TABBED CONTENT

    Tabs are a very intuitive way to present different categories of content without pushing a user to a different page.

    Adding Additonal Tabs: When you create a new tab, you also need to create a new section for that tab to load. In the examples below, "Menu 3" has certain elements which have been bolded to demonstrate what you'll need to add.

    Tabbed Content: Tabs

    HOME

    Some content.

    Menu 1

    Some content in menu 1.

    Menu 2

    Some content in menu 2.

    Menu 3

    Some content in menu 3.

    HTML for Snippet: Tabs


    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>

    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>

      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Some content in menu 3.</p>
      </div>
    </div>

    Tabbed Content: Pills

    HOME

    Some content.

    Menu 1

    Some content in menu 1.

    Menu 2

    Some content in menu 2.

    Menu 3

    Some content in menu 2.

    HTML for Snippet: Pills


    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>

    Tabbed Content: Left-Hand/Stacked Pills

    HOME

    Some content.

    HTML for Snippet: Left-Hand/Stacked Pills


    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>

    Video Snippet

    VIDEOS

    When embedding videos, be sure to embed them within this snippet. Doing so will ensure the embedded will appear nicely on desktop and mobile browsers.

    HTML for Snippet: Embedded Video


    <div class="embed-responsive embed-responsive-16by9">

    <!-- Place YouTube embed code below -->

    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY" width="300" height="150"></iframe>

    </div>

    Table Snippet

    TABLES

    While these new responsive columns are great, sometimes you just need content to be in a table. Tables have received a major face-lift, so now you don't have to feel as bad about using them. As you type into a table, you will notice that columns will automatically adjust for your screen size, as well as the size of the content within the table.


    Need to add more rows or columns? Simply right click on the table and choose which option best suits your needs.

    Column 1 Column 2 Column 3
         
         
         

    HTML for Snippet: Embedded Video


      <table class="table table-hover">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>