Theme Features in WordPress

General Guidelines

The current NMSU templates are based on Bootstrap 3 and generally follow Bootstrap HTML and CSS conventions, with some additions and modifications. The components and JavaScript plugins available in Bootstrap are generally available to WordPress users, however implementing them can require knowledge of HTML, CSS, and/or JavaScript. Developers developing sites for NMSU should become familiar with these conventions and components in order to better understand the foundations of NMSU’s template. This feature sheet presents implementations for web development and design elements under NMSU’s brand identity program. Additional examples of CSS Grid markup and several components are available on Bootstrap’s site.



Collapse

Collapsible elements are possible using Bootstrap’s Collapse JavaScript plug-in. Collapse is an easy way to toggle the visibility of content using an external link or button.

As a link

How much wood could a woodchuck chuck if a woodchuck could chuck wood?

How much?

                                        
    <div class="panel panel-default">
        <div class="panel-heading">As a link</div>
        <div class="panel-body">
            <p>How much wood could a woodchuck chuck if a woodchuck could chuck wood?</p>
            <a href="#collapseLink" data-toggle="collapse">How much?</a>
        </div>
        <div class="collapse padded-15" id="collapseLink">
            <p class="alert alert-info">About as much wood as a woodchuck would chuck if a woodchuck could chuck wood.</p>
        </div>
    </div>
                                        

As a button

How many possible configurations are there for the order of cards in a deck of standard playing cards?

80,658,175,170,943,878,571,660,636,856,403,766,975,289,505,440,883,277,824,000,000,000,000

                                        
    <div class="panel panel-default">
        <div class="panel-heading">As a button</div>
        <div class="panel-body">
            <p>How many possible configurations are there for the order of cards in a deck of standard playing cards?</p>
            <a href="#collapseButton" data-toggle="collapse">Show me</a>
        </div>
        <div class="collapse padded-15" id="collapseButton">
            <p class="alert alert-info">80,658,175,170,943,878,571,660,636,856,403,766,975,289,505,440,883,277,824,000,000,000,000</p>
        </div>
    </div>
                                        

Accordions

The Collapsible plug-in can also be used to create accordion-style interfaces. Simply add collapsible behaviors to the Panel Group element by hiding the .panel-body elements with .collapse and toggling them with the .panel-headers. To make a .collapse open by default, give it an additional .in class. Also, make sure if you are using aria accessibility attributes that an element with .collapse and .in classes will have aria-expanded="true".

 

Collapsible Body #1
Collapsible Body #2
  • Collapsible ListGroup Item One
  • Collapsible ListGroup Item Two
  • Collapsible ListGroup Item Three

 

                                    
    <div class="panel-group" id="accordion" role="tablist" aria-multiselctable="true">
        <div class="panel panel-primary">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                   Collapsible Body #1 
                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Collapsible Body #2
                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Collapsible Group ListGroup
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <ul class="list-group">
                    <li class="list-group-item">Collapsible ListGroup Item One</li>
                    <li class="list-group-item">Collapsible ListGroup Item Two</li>
                    <li class="list-group-item">Collapsible ListGroup Item Three</li>
                </ul>
            </div>
        </div>
    </div>    
                                    

Tabs

Tabbed interfaces are available using the Bootstrap Tab JavaScript plug-in. The default styling is light and allows for dropdown tab navigation if necessary.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis eros vulputate, lobortis lectus id, mollis ipsum. Fusce viverra neque nec lacus mollis, ut elementum magna pellentesque. Fusce quis eros sagittis, dictum felis id, lacinia arcu. Vestibulum maximus tortor sed blandit pulvinar. Phasellus vehicula porta justo, eu aliquet dui. Fusce dignissim urna ac nibh luctus, ut volutpat arcu fermentum. Morbi vel enim at elit euismod pellentesque et vel nunc. Phasellus quis fermentum justo. Etiam sodales augue et finibus ultricies.
Nulla ac consequat libero, sed dapibus erat. Nam nec lectus quis nulla bibendum hendrerit. Nunc elementum blandit tortor ac commodo. Quisque in vulputate lorem. Phasellus ut facilisis magna, vitae bibendum sapien. Vestibulum imperdiet a ipsum quis volutpat. Nam blandit pulvinar nisl, a sollicitudin turpis suscipit ac. In hac habitasse platea dictumst. Nullam maximus vulputate tortor nec vulputate. Aenean sed venenatis nisi. Nullam blandit porttitor enim, ac tristique tortor consectetur eu. Aenean ligula velit, pretium vehicula facilisis ac, tempus ut felis. In mollis eros in facilisis pretium. In felis enim, fermentum ac dignissim non, consectetur at tortor.
Vivamus quis mauris gravida, egestas diam non, commodo ipsum. Nunc mi tellus, euismod sed ornare quis, vulputate quis lectus. Mauris ut vestibulum leo. Quisque dignissim augue semper lectus lobortis, eget accumsan urna porttitor. Nullam vitae ultricies orci. Suspendisse at quam velit. Vivamus consequat fringilla semper. Duis vulputate, lorem a cursus pharetra, risus nibh consequat risus, non laoreet ante erat quis est. Fusce turpis urna, laoreet eu justo non, eleifend iaculis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac ligula ultrices, suscipit nisi sed, ultrices elit. Nullam facilisis neque felis. Donec nec malesuada leo, in aliquam urna.
Donec magna dui, venenatis at sem id, pharetra finibus odio. Phasellus ultrices tortor quis quam molestie egestas eget id odio. Morbi vehicula dui vitae arcu maximus, id ullamcorper ante auctor. Nam vel fermentum nibh. Mauris commodo quam sit amet pharetra rhoncus. Quisque eleifend ex a lacus suscipit dictum. Fusce nec mattis ligula. Integer varius lectus arcu, ut consequat eros gravida nec.

 

                                        
    <div id="tab-example">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#tab-example-1" aria-controls="tab-example-1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="#tab-example-2" aria-controls="tab-example-2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li class="dropdown" role="presentation">
                <a aria-expanded="false" href="#" id="tab-drop" class="dropdown-toggle" data-toggle="dropdown" aria-controls="tab-drop-nav">
                    Dropdown <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="tab-drop" id="tab-drop-nav">
                    <li role="presentation">
                        <a href="#tab-example-3" aria-controls="tab-example-3" role="tab" data-toggle="tab">Tab 3</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab-example-4" aria-controls="tab-example-4" role="tab" data-toggle="tab">Tab 4</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="tab-content padded-15">
            <div role="tabpanel" class="tab-pane fade in active" id="tab-example-1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis eros vulputate, lobortis lectus id, mollis ipsum. Fusce viverra neque nec lacus mollis, ut elementum magna pellentesque. Fusce quis eros sagittis, dictum felis id, lacinia arcu. Vestibulum maximus tortor sed blandit pulvinar. Phasellus vehicula porta justo, eu aliquet dui. Fusce dignissim urna ac nibh luctus, ut volutpat arcu fermentum. Morbi vel enim at elit euismod pellentesque et vel nunc. Phasellus quis fermentum justo. Etiam sodales augue et finibus ultricies.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab-example-2">
                <p>Nulla ac consequat libero, sed dapibus erat. Nam nec lectus quis nulla bibendum hendrerit. Nunc elementum blandit tortor ac commodo. Quisque in vulputate lorem. Phasellus ut facilisis magna, vitae bibendum sapien. Vestibulum imperdiet a ipsum quis volutpat. Nam blandit pulvinar nisl, a sollicitudin turpis suscipit ac. In hac habitasse platea dictumst. Nullam maximus vulputate tortor nec vulputate. Aenean sed venenatis nisi. Nullam blandit porttitor enim, ac tristique tortor consectetur eu. Aenean ligula velit, pretium vehicula facilisis ac, tempus ut felis. In mollis eros in facilisis pretium. In felis enim, fermentum ac dignissim non, consectetur at tortor.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab-example-3">
                <p>Vivamus quis mauris gravida, egestas diam non, commodo ipsum. Nunc mi tellus, euismod sed ornare quis, vulputate quis lectus. Mauris ut vestibulum leo. Quisque dignissim augue semper lectus lobortis, eget accumsan urna porttitor. Nullam vitae ultricies orci. Suspendisse at quam velit. Vivamus consequat fringilla semper. Duis vulputate, lorem a cursus pharetra, risus nibh consequat risus, non laoreet ante erat quis est. Fusce turpis urna, laoreet eu justo non, eleifend iaculis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac ligula ultrices, suscipit nisi sed, ultrices elit. Nullam facilisis neque felis. Donec nec malesuada leo, in aliquam urna.</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="tab-example-4">
                <p>Donec magna dui, venenatis at sem id, pharetra finibus odio. Phasellus ultrices tortor quis quam molestie egestas eget id odio. Morbi vehicula dui vitae arcu maximus, id ullamcorper ante auctor. Nam vel fermentum nibh. Mauris commodo quam sit amet pharetra rhoncus. Quisque eleifend ex a lacus suscipit dictum. Fusce nec mattis ligula. Integer varius lectus arcu, ut consequat eros gravida nec.</p>
            </div>
        </div>
    </div>        
                                        

Pill Tabs

Tabs can also be given “pill” styling by replacing the .nav-tabs class on the parent <ul> with .nav-pills.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis eros vulputate, lobortis lectus id, mollis ipsum. Fusce viverra neque nec lacus mollis, ut elementum magna pellentesque. Fusce quis eros sagittis, dictum felis id, lacinia arcu. Vestibulum maximus tortor sed blandit pulvinar. Phasellus vehicula porta justo, eu aliquet dui. Fusce dignissim urna ac nibh luctus, ut volutpat arcu fermentum. Morbi vel enim at elit euismod pellentesque et vel nunc. Phasellus quis fermentum justo. Etiam sodales augue et finibus ultricies.
Nulla ac consequat libero, sed dapibus erat. Nam nec lectus quis nulla bibendum hendrerit. Nunc elementum blandit tortor ac commodo. Quisque in vulputate lorem. Phasellus ut facilisis magna, vitae bibendum sapien. Vestibulum imperdiet a ipsum quis volutpat. Nam blandit pulvinar nisl, a sollicitudin turpis suscipit ac. In hac habitasse platea dictumst. Nullam maximus vulputate tortor nec vulputate. Aenean sed venenatis nisi. Nullam blandit porttitor enim, ac tristique tortor consectetur eu. Aenean ligula velit, pretium vehicula facilisis ac, tempus ut felis. In mollis eros in facilisis pretium. In felis enim, fermentum ac dignissim non, consectetur at tortor.
Vivamus quis mauris gravida, egestas diam non, commodo ipsum. Nunc mi tellus, euismod sed ornare quis, vulputate quis lectus. Mauris ut vestibulum leo. Quisque dignissim augue semper lectus lobortis, eget accumsan urna porttitor. Nullam vitae ultricies orci. Suspendisse at quam velit. Vivamus consequat fringilla semper. Duis vulputate, lorem a cursus pharetra, risus nibh consequat risus, non laoreet ante erat quis est. Fusce turpis urna, laoreet eu justo non, eleifend iaculis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac ligula ultrices, suscipit nisi sed, ultrices elit. Nullam facilisis neque felis. Donec nec malesuada leo, in aliquam urna.
Donec magna dui, venenatis at sem id, pharetra finibus odio. Phasellus ultrices tortor quis quam molestie egestas eget id odio. Morbi vehicula dui vitae arcu maximus, id ullamcorper ante auctor. Nam vel fermentum nibh. Mauris commodo quam sit amet pharetra rhoncus. Quisque eleifend ex a lacus suscipit dictum. Fusce nec mattis ligula. Integer varius lectus arcu, ut consequat eros gravida nec.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum tincidunt sollicitudin. Aliquam sit amet ultrices ligula. Maecenas pretium odio nec ullamcorper posuere. Quisque tristique turpis in venenatis rutrum. Praesent nunc neque, posuere sit amet arcu at, aliquet ornare dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices nisi vel euismod elementum. Cras id diam nisi. Integer accumsan sit amet turpis vitae molestie. In magna urna, vestibulum vel imperdiet et, ultrices vel urna. Nulla dui dolor, blandit ut pulvinar nec, aliquet in velit. Donec faucibus diam ornare, auctor mi eget, molestie orci. Duis a risus scelerisque, luctus metus non, consequat metus.

Headings

H1 Heading Example Subheading

H2 Heading Example Subheading

H3 Heading Example Subheading

H4 Heading Example Subheading

H5 Heading Example Subheading
H6 Heading Example Subheading

    <h1>H1 Heading Example <small>Subheading</small></h1>
    <h2>H2 Heading Example <small>Subheading</small></h2>
    <h3>H3 Heading Example <small>Subheading</small></h3>
    <h4>H4 Heading Example <small>Subheading</small></h4>
    <h5>H5 Heading Example <small>Subheading</small></h5>
    <h6>H6 Heading Example <small>Subheading</small></h6>

Lead Text

The .lead class can be added to the container of text to give the text more weight and bring more attention to it. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum tincidunt sollicitudin. Aliquam sit amet ultrices ligula. Maecenas pretium odio nec ullamcorper posuere.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum tincidunt sollicitudin. Aliquam sit amet ultrices ligula. Maecenas pretium odio nec ullamcorper posuere. Quisque tristique turpis in venenatis rutrum.

Place your Citation Here
                                    
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <footer>Place your <cite title="Example">Citation Here</cite></footer>
    </blockquote>
                                    

Reverse Blockquotes

You can easily create a right-justified blockquote by adding the .blockquote-reverse class to any <blockquote> element.

Right aligned Citation Here
                                    
    <blockquote class="blockquote-reverse">
        ...
    </blockquote>
                                    

Hanging Indents

Simply add the class .hanging-indent to an element to format that element using a hanging indentation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi gravida cursus massa et convallis. Vivamus non quam nec urna maximus eleifend. Mauris non sapien ac erat vehicula luctus. Etiam faucibus ligula eu eros varius, nec finibus lacus feugiat. Nunc quis sem suscipit, consectetur ex sed, scelerisque lectus.

Text Alignment

Text can be left aligned in an element by declaring the .text-left class on that element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum.

Text can be right aligned in an element by declaring the .text-right class on that element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum.

Text can be centered in an element by declaring the .text-center class on that element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum.

Text can be justified in an element by declaring the .text-justify class on that element. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus luctus eros, vel tempor ipsum.

Turn line-wrap off with .text-nowrap.

Text Color

Text can be given contextual color by assigning a class to the parent element. For the primary brand color, use .text-primary.

Text can be given contextual color by assigning a class to the parent element. For a muted gray color, use .text-muted.

Text can be given contextual color by assigning a class to the parent element. For the green color used by success alerts, use .text-success.

Text can be given contextual color by assigning a class to the parent element. For the blue color used by information alerts, use .text-info.

Text can be given contextual color by assigning a class to the parent element. For the orange color used by warning alerts, use .text-warning.

Text can be given contextual color by assigning a class to the parent element. For the red color used by error alerts, use .text-danger.

Text Backgrounds

When using the background color classes below, it is a good idea to use an element with padding or add an additional class or CSS rule to provide padding.

Text can be given contextual background color by assigning a class to the parent element. For the primary brand color, use .bg-primary.

Text can be given contextual background color by assigning a class to the parent element. For the green color used by success alerts, use .bg-success.

Text can be given contextual background color by assigning a class to the parent element. For the blue color used by information alerts, use .bg-info.

Text can be given contextual background color by assigning a class to the parent element. For the orange color used by warning alerts, use .bg-warning.

Text can be given contextual background color by assigning a class to the parent element. For the red color used by error alerts, use .bg-danger.

Alert Messages

Alert messages with predefined background and text colors, as well as some additional styling are also available. Alert elements must have the .alert class declared and a
class to define the alert type. Icons may be added using Bootstrap glyphicons, and alerts may even be made dismissible by declaring the .alert-dismissible class and adding
a close button as seen in the example below.

Hey! This is a success alert.

Hey! This is an information alert.

Hey! This is a warning alert.

Hey! This is a danger alert.

Hey! This is a dismissible information alert with an icon.

                                    
    <p class="alert alert-success"><strong>Hey!</strong> This is a success alert.</p>
    <p class="alert alert-info"><strong>Hey!</strong> This is an information alert.</p>
    <p class="alert alert-warning"><strong>Hey!</strong> This is a warning alert.</p>
    <p class="alert alert-danger"><strong>Hey!</strong> This is a danger alert.</p>
    <p class="alert alert-info alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
        <span class="glyphicon glyphicon-info-sign"></span> 
        <strong>Hey!</strong> This is a dismissible information alert with an icon.
    </p>
                                    

Buttons

Any link or button element can be given an attractive button style by adding the .btn class. The .btn class can be added to <input> elements with type of button or submit, however this is less reliable in older browsers.

Basic Buttons

Link as a Button   

                                        
    <a href="#" role="button" class="btn btn-default">Link as a Button</a>
    <button class="btn btn-default">Standard Button</button>
    <input type="button" class="btn btn-default" value="Input Button" />
    <input type="submit" class="btn btn-default" value="Submit Button" />
                                        

Please Note: In order to provide the most consistent experience, try to use <button> elements when possible to generate buttons.
Check Bootstrap’s Button documentation for more details.

Contextual Buttons

Contextual color classes also exist for <a> and <button> tags (shown below). For <input> elements,
only the .btn-default contextual class is effective.


    <button class="btn btn-default">Default Button</button>
    <button class="btn btn-primary">Primary Button</button>
    <button class="btn btn-success">Success Button</button>
    <button class="btn btn-info">Info Button</button>
    <button class="btn btn-warning">Warning Button</button>
    <button class="btn btn-danger">Danger Button</button>

Badges

Badges may be added to buttons and links using a <span> tag with the .badge class.

Link Badge

                                        
    <a href="#">Link <span class="badge">Badge</span></a>
    <button class="btn btn-default">Button <span class="badge">Badge</span></button>
    <button class="btn btn-primary">Messages <span class="badge">15</span></button>
                                        

Button Groups

Buttons may be grouped together visually using the Button Group component. Button Groups remove the default spacing between buttons and round only the outermost corners.

 

                                        
    <div class="btn-group" role="group" aria-label="Button Group Example">
        <button type="button" class="btn btn-default">First</button>
        <button type="button" class="btn btn-default">Second</button>
        <button type="button" class="btn btn-default">Third</button>
        <button type="button" class="btn btn-default">Fourth</button>
    </div>
                                        

Button Toolbars

Bootstrap Button Toolbars are similar to Button Groups, but they allow you to group multiple Button Groups into a single visual component.

 

                                        
    <div class="btn-toolbar" role="toolbar" aria-label="Button Toolbar Example">
        <div class="btn-group" role="group" aria-label="Button Toolbar Control Tools">
            <button type="button" class="btn btn-default" aria-label="back">
                <span class="glyphicon glyphicon-backward"></span>
            </button>
            <button type="button" class="btn btn-default" aria-label="play">
                <span class="glyphicon glyphicon-play"></span>
            </button>
            <button type="button" class="btn btn-default" aria-label="pause">
                <span class="glyphicon glyphicon-pause"></span>
            </button>
            <button type="button" class="btn btn-default" aria-label="forward">
                <span class="glyphicon glyphicon-forward"></span>
            </button>
        </div>
        <div class="btn-group" role="group" aria-label="Button Toolbar Other Tools">
            <button type="button" class="btn btn-default" aria-label="mute">
                <span class="glyphicon glyphicon-volume-off"></span>
            </button>
            <button type="button" class="btn btn-default" aria-label="repeat">
                <span class="glyphicon glyphicon-repeat"></span>
            </button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="settings" aria-expanded="false">
                <span class="glyphicon glyphicon-cog"></span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li role="menuitem"><a href="#">Dropdown Option 1</a></li>
                <li role="menuitem"><a href="#">Dropdown Option 2</a></li>
            </ul>
        </div>
    </div>

Lists

Unordered Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
    • Subitem 1
    • Subitem 2
  • Item 5

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 5</li>
    </ul>

Ordered Lists

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ol>

Unstyled Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
    • Subitem 1
    • Subitem 2
  • Item 5

    <ul class="list-unstyled">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
        </li>
        <li>Item 5</li>
    </ul>

Inline Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

    <ul class="list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

Inline Lists, Separated

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

    <ul class="list-inline separated">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

Description Lists

Item 1
Description of Item 1
Item 2
Description of Item 2
Item 3
Description of Item 3
Item 4
Description of Item 4

    <dl>
        <dt>Item 1</dt>
        <dd>Description of Item 1</dd>
        <dt>Item 2</dt>
        <dd>Description of Item 2</dd>
        <dt>Item 3</dt>
        <dd>Description of Item 3</dd>
        <dt>Item 4</dt>
        <dd>Description of Item 4</dd>
    </dl>

Horizontal Description Lists

Item 1
Description of Item 1
Item 2
Description of Item 2
Item 3
Description of Item 3
Item 4
Description of Item 4

    <dl class="dl-horizontal">
        <dt>Item 1</dt>
        <dd>Description of Item 1</dd>
        <dt>Item 2</dt>
        <dd>Description of Item 2</dd>
        <dt>Item 3</dt>
        <dd>Description of Item 3</dd>
        <dt>Item 4</dt>
        <dd>Description of Item 4</dd>
    </dl>

List Groups

  • List Group Item
  • BadgeList Group Item with Badge
  • List Group Item with Success Class
  • List Group Item with Info Class
  • List Group Item with Warning Class
  • List Group Item with Danger Class
  • List Group Item with Shaded Class

    <ul class="list-group">
        <li class="list-group-item">List Group Item</li>
        <li class="list-group-item"><span class="badge">Badge</span>List Group Item with Badge</li>
        <li class="list-group-item list-group-item-success">List Group Item with Success Class</li>
        <li class="list-group-item list-group-item-info">List Group Item with Info Class</li>
        <li class="list-group-item list-group-item-warning">List Group Item with Warning Class</li>
        <li class="list-group-item list-group-item-danger">List Group Item with Danger Class</li>
        <li class="list-group-item">List Group Item with Shaded Class</li>
    </ul>



    <div class="list-group" role="menu">
        <a class="list-group-item active" href="#" role="menuitem">Active Link</a> 
        <a class="list-group-item" href="#" role="menuitem">Link</a> 
        <a class="list-group-item disabled" href="#" role="menuitem" aria-disabled="true">Disabled Link</a> 
    </div>


List Groups of Custom Content

Styled Content

List groups can be used in more contexts than simple lists. You can use the .list-group and .list-group-item classes to mark up almost any sequential content.

Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    <div class="list-group" role="list>
        <div class="list-group-item" role="listitem">
            <h4>Styled Content</h4>
            <p>...</p>
        </div>
        <div class="list-group-item" role="listitem">
            <h4>Item 2</h4>
            <p>...</p>
        </div>
        <div class="list-group-item" role="listitem">
            <h4>Item 3</h4>
            <p>...</p>
        </div>
    </div>

Tables

Optional Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3
Optional Table Footer

    <table class="table">
        <caption>Optional Table Caption</caption>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td>Row 1, Cell 3</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
                <td>Row 2, Cell 3</td>
            </tr>
            <tr>
                <td>Row 3, Cell 1</td>
                <td>Row 3, Cell 2</td>
                <td>Row 3, Cell 3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr><td colspan="3">Optional Table Footer</td></tr>
        </tfoot>
    </table>

Striped Tables

Optional Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

    <table class="table table-striped">
        ...
    </table>

Bordered Tables

Optional Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

    <table class="table table-bordered">
        ...
    </table>

Hover-State Tables

Optional Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

    <table class="table table-hover">
        ...
    </table>

Condensed Tables

Optional Table Caption
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

    <table class="table table-condensed">
        ...
    </table>

Contextual Tables

Optional Table Caption
Col 1 Col 2 Col 3 Col 4 Col 5
R1, C1 R1, C2 R1, C3 R1, C4 R1, C5
R2, C1 R2, C2 R2, C3 R2, C4 R2, C5
R3, C1 R3, C2 R3, C3 R3, C4 R3, C5
R4, C1 R4, C2 R4, C3 R4, C4 R4, C5
R5, C1 R5, C2 R5, C3 R5, C4 R5, C5
R6, C1 R6, C2 R6, C3 R6, C4 R6, C5

    <table class="table table-bordered">
        <caption>Optional Table Caption</caption>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
        </thead>
        <tbody>
            <tr class="active">
                <td>R1, C1</td>
                <td>R1, C2</td>
                <td>R1, C3</td>
                <td>R1, C4</td>
                <td>R1, C5</td>
            </tr>
            <tr class="success">
                <td>R2, C1</td>
                <td>R2, C2</td>
                <td>R2, C3</td>
                <td>R2, C4</td>
                <td>R2, C5</td>
            </tr>
            <tr class="info">
                <td>R3, C1</td>
                <td>R3, C2</td>
                <td>R3, C3</td>
                <td>R3, C4</td>
                <td>R3, C5</td>
            </tr>
            <tr class="warning">
                <td>R4, C1</td>
                <td>R4, C2</td>
                <td>R4, C3</td>
                <td>R4, C4</td>
                <td>R4, C5</td>
            </tr>
            <tr class="danger">
                <td>R5, C1</td>
                <td>R5, C2</td>
                <td>R5, C3</td>
                <td>R5, C4</td>
                <td>R5, C5</td>
            </tr>
            <tr>
                <td class="active">R6, C1</td>
                <td class="success">R6, C2</td>
                <td class="info">R6, C3</td>
                <td class="warning">R6, C4</td>
                <td class="danger">R6, C5</td>
            </tr>
        </tbody>
    </table>

Responsive Tables

Wrapping a table in a parent with class .table-responsive allows scrolling in the parent on the x-axis, which should keep larger tables from breaking the widths of their parents and make sure that all of the data presented in the table are available to view.

Optional Table Caption
Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4

    <div class="table-responsive">
        <table class="table">
            ...
        </table>
    </div>

Forms

Standard Forms

Bootstrap has a great deal of customization options for forms that are well covered in their documentation. Some examples are provided below to give a well-rounded understanding of the tools and options available.

Legend

This is a default nota bene for the text input


This is a modified and branded nota bene for the text area


Radios
Checkboxes


    <fieldset>
        <legend>Legend</legend>
        <form>
            <div class="form-group">
                <label for="standardTextInput">Text Input</label>
                <input type="text" name="standardText" class="form-control" id="standardTextInput" placeholder="Text Input" />
                <p class="help-block">This is a default nota bene for the text input</p>
            </div>
            <div class="form-group">
                <label for="standardTextArea">Text Area</label>
                <textarea class="form-control" name="standardTextArea" id="standardTextArea" rows="4" placeholder="Text Area"></textarea>
                <p class="help-block"><em class="text-primary">This is a modified and branded nota bene for the text area</em></p>
            </div>
            <div class="form-group">
                <label for="standardSelect">Select List</label>
                <select class="form-control" id="standardSelect" name="standardSelect" >
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <fieldset>
                <legend>Radios</legend>
                <div class="radio">
                    <label for="standardRadio1">
                        <input type="radio" id="standardRadio1" name="standardRadio" value="" /> 
                        Radio 1
                    </label>
                </div>
                <div class="radio">
                    <label for="standardRadio2">
                        <input type="radio" id="standardRadio2" name="standardRadio" value="" /> 
                        Radio 2
                    </label>
                </div>
                <div class="radio">
                    <label for="standardRadio3">
                        <input type="radio" id="standardRadio3" name="standardRadio" value="" /> 
                        Radio 3
                    </label>
                </div>
            </fieldset>
            <fieldset>
                <legend>Checkboxes</legend>
                <div class="checkbox">
                    <label for="standardCheckbox1">
                        <input type="checkbox" id="standardCheckbox1" name="standardCheckbox" value="" /> 
                        Checkbox 1
                    </label>
                </div>
                <div class="checkbox">
                    <label for="standardCheckbox2">
                        <input type="checkbox" id="standardCheckbox2" name="standardCheckbox" value="" /> 
                        Checkbox 2
                    </label>
                </div>
                <div class="checkbox">
                    <label for="standardCheckbox3">
                        <input type="checkbox" id="standardCheckbox3" name="standardCheckbox" value="" /> 
                        Checkbox 3
                    </label>
                </div>
            </fieldset>
            <div class="form-group">
                <label for="standardFile">File</label>
                <input type="file" id="standardFile" name="standardFile" />
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Submit Button">
            </div>
        </form>
    </fieldset>        

Horizontal Forms

To use horizontal forms, add a .form-horizontal class to the parent element (most likely a <form>). Next use Bootstrap’s grid system to control layout as if the .form-group elements were rows.


    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="horizontalTextInput">Text Input</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" name="horizontalText" id="horizontalTextInput" placeholder="Text Input" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="horizontalTextArea">Text Area</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="horizontalTextArea" id="horizontalTextArea" rows="4" placeholder="Text Area"></textarea>
            </div>
        </div>
    </form>

Inline Forms

 


    <form class="form-inline">
        <div class="form-group">
            <label for="inlineInputName">Name</label>
            <input type="text" class="form-control" id="inlineInputName">
        </div> 
        <div class="form-group">
            <label for="inlineInputEmail">Email</label>
            <input type="email" class="form-control" id="inlineInputEmail">
        </div> 
        <button type="submit" class="btn btn-default">Save</button>
    </form>

Inline Forms with Hidden Labels




 


    <form class="form-inline">
        <div class="form-group">
            <label for="inlineSelectPrefix" class="sr-only">Prefix</label>
            <select class="form-control" id="inlineSelectPrefix">
                <option value="">-- Prefix --</option>
                <option>Dr.</option>
                <option>Mr.</option>
                <option>Mrs.</option>
                <option>Ms.</option>
                <option>Mx.</option>
            </select>
        </div> 
        <div class="form-group">
            <label class="sr-only" for="inlineInputFirstName">First Name</label>
            <input type="text" class="form-control" id="inlineInputFirstName" placeholder="First Name">
        </div> 
        <div class="form-group">
            <label class="sr-only" for="inlineInputLastName">Last Name</label>
            <input type="text" class="form-control" id="inlineInputLastName" placeholder="Last Name">
        </div> 
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

Modified Controls

https://

@nmsu.edu

$

.00

Static Control

Lorem Ipsum


    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-3" for="standardSmallText">Small</label>
            <div class="col-sm-9">
                <input type="text" class="form-control input-sm" id="standardSmallText" placeholder="Small Text Input" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3" for="standardLargeText">Large</label>
            <div class="col-sm-9">
                <input type="text" class="form-control input-lg" id="standardLargeText" placeholder="Large Text Input" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3" class="" for="standardTextPrefixAddon">Prefix</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="input-group-addon">https://</div>
                    <input type="text" class="form-control" id="standardTextPrefixAddon" placeholder="Domain Name" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3" for="standardTextSuffixAddon">Suffix</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <input type="text" class="form-control" id="standardTextSuffixAddon" placeholder="User Name" />
                    <div class="input-group-addon">@nmsu.edu</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3" for="standardTextTwoAddon">Two Add-ons</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="number" class="form-control" id="standardTextTwoAddon" placeholder="Amount" />
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-3" for="modifiedInputPrefix">Checkbox Prefix</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="input-group-addon">
                        <input type="checkbox" name="modifiedInputPrefix" id="modifiedInputPrefix" />
                    </div>
                    <label class="sr-only" for="modifiedTextInputPrefix">Checkbox Prefix Text Field</label>
                    <input type="text" class="form-control" id="modifiedTextInputPrefix" placeholder="Other" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <strong class="control-label col-sm-3" for="standardStatic">Static Control</strong>
            <div class="col-sm-9">
                <p class="form-control-static" id="standardStatic">Lorem Ipsum</p>
            </div>
        </div>
    </form>

Contextualized Controls

Form controls can also be given contextual style. Examples are given below of different inputs with context. There are also examples of inputs with prefixes and feedback icons to add extra contextual information.


(success)

@

(success)

(warning)

@

(warning)

(error)

@

(error)

Contextual Checkboxes

Accessibility Note: In the markup below, you will see that contextual text inputs reference information using aria-describedby that gives a textual representation of the contextual information as well. Please keep accessibility in mind when providing visual feedback.

Please note: Inputs with icons cannot have suffix add-ons. This will cause the icon to overlap the suffix in an unattractive way.


    <form>
        <div class="form-group has-success">
            <label class="control-label" for="contextSuccess">Success</label>
            <input type="text" class="form-control" id="contextSuccess" aria-describedby="contextSuccessStatus" />
            <span id="contextSuccessStatus" class="sr-only">(success)</span>
        </div>
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="contextSuccessMod">Success w/ Prefix and Icon</label>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" id="contextSuccessMod" aria-describedby="contextSuccessModStatus" />
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="contextSuccessModStatus" class="sr-only">(success)</span>
        </div>
        <div class="form-group has-warning">
            <label class="control-label" for="contextWarning">Warning</label>
            <input type="text" class="form-control" id="contextWarning" aria-describedby="contextWarningStatus" />
            <span id="contextWarningStatus" class="sr-only">(warning)</span>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="contextWarningMod">Warning w/ Prefix and Icon</label>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" id="contextWarningMod" aria-describedby="contextWarningModStatus" />
            </div>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
            <span id="contextWarningModStatus" class="sr-only">(warning)</span>
        </div>
        <div class="form-group has-error">
            <label class="control-label" for="contextError">Error</label>
            <input type="text" class="form-control" id="contextError" aria-describedby="contextErrorStatus" />
            <span id="contextErrorStatus" class="sr-only">(error)</span>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="contextErrorMod">Error w/ Prefix and Icon</label>
            <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" id="contextErrorMod" aria-describedby="contextErrorModStatus" />
            </div>
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
            <span id="contextErrorModStatus" class="sr-only">(error)</span>
        </div>
        <div class="form-group has-success">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="contextCheckboxSuccess" name="contextCheckbox" value="1" />
                    Success Checkbox
                </label>
            </div>
        </div>
        <div class="form-group has-warning">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="contextCheckboxWarning" name="contextCheckbox" value="0" />
                    Warning Checkbox
                </label>
            </div>
        </div>
        <div class="form-group has-error">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="contextCheckboxError" name="contextCheckbox" value="-1" />
                    Error Checkbox
                </label>
            </div>
        </div>
    </form>

Panels

Panels provide a way of creating visual distinction and of visually organizing information. Panels are very flexible components. In general, you will create a div with class .panel and a contextual class (.panel-default for plain grey).

 

This is a default panel.

    <div class="panel panel-default">
        <div class="panel-body">
            This is a default panel.
        </div>
    </div>

Customization and Context

Panels may have an optional header and/or an optional footer. They may also be given different contextual colors using the standard contextual suffixes (-success, -info, -warning, -error) along with the .panel- class prefix.

 

Panel Title

This is the body.

Primary Panel

Panel content.

Success Panel

Panel content.

Info Panel

Panel content.

Warning Panel

Panel content.

Danger Panel

Panel content.

    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Panel Title</h3></div>
        <div class="panel-body">
            This is the body.
        </div>
        <div class="panel-footer">This a panel footer.</div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading"><h3 class="panel-title">Primary Panel</h3></div>
        <div class="panel-body">
            Panel content.
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading"><h3 class="panel-title">Success Panel</h3></div>
        <div class="panel-body">
            Panel content.
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading"><h3 class="panel-title">Info Panel</h3></div>
        <div class="panel-body">
            Panel content.
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading"><h3 class="panel-title">Warning Panel</h3></div>
        <div class="panel-body">
            Panel content.
        </div>
    </div>
    <div class="panel danger-error">
        <div class="panel-heading"><h3 class="panel-title">Danger Panel</h3></div>
        <div class="panel-body">
            Panel content.
        </div>
    </div>

Nested Elements

Some elements, such as tables and list-groups, can be nested seamlessly inside of panels. To nest these elements, place them after the .panel-body (or instead of the .panel-body in cases where there is no .panel-body content).

 

Panel Table

This is the panel body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in sapien sed mi gravida convallis. Aliquam convallis accumsan blandit. Sed luctus mauris pulvinar urna consectetur, at viverra quam commodo. Donec et turpis quis tellus porttitor imperdiet. Phasellus cursus eget quam eu laoreet.

Column 1 Column 2 Column 3
Column 1, Row 1 Column 1, Row 2 Column 1, Row 3
Column 2, Row 1 Column 2, Row 2 Column 2, Row 3
Column 3, Row 1 Column 3, Row 2 Column 3, Row 3
Column 4, Row 1 Column 4, Row 2 Column 4, Row 3

    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Panel Table</h3></div>
        <div class="panel-body">...</div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1, Row 1</td>
                    <td>Column 1, Row 2</td>
                    <td>Column 1, Row 3</td>
                </tr>
                ...
            </tbody>
        </table>
    </div>  

 

Panel List-group

This is the panel body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in sapien sed mi gravida convallis. Aliquam convallis accumsan blandit. Sed luctus mauris pulvinar urna consectetur, at viverra quam commodo. Donec et turpis quis tellus porttitor imperdiet. Phasellus cursus eget quam eu laoreet.

  • Item 1
  • Item 2
  • Item 3

    <div class="panel panel-default">
        <div class="panel-heading"><h3 class="panel-title">Panel List-group</h3></div>
        <div class="panel-body">
            ...
        </div>
        <ul class="list-group">
            <li class="list-group-item">Item 1</li>
            <li class="list-group-item">Item 2</li>
            <li class="list-group-item">Item 3</li>
        </ul>
    </div>

Panel Groups

Panels may also be grouped together into panel groups, as in the case of Accordions. By adding a parent <div> with class .panel-group, any number of panels can be grouped together.

 

Panel 1 Title

Panel 1 Content.

Panel 2 Title

Panel 2 Content.

    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title">Panel 1 Title</h3></div>
            <div class="panel-body">Panel 1 Content.</div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading"><h3 class="panel-title">Panel 2 Title</h3></div>
            <div class="panel-body">Panel 2 Content.</div>
        </div>
    </div>