Jump to: navigation, search

Horizontal Info Boxes (Bootstrapskin Panels)

Horizontal Info Boxes

lighter box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

light Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

dark Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

darker Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

neutral Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

info Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

warning Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

danger Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

success Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

Changing the colour of the box involves nothing more than replacing the panel class. In the example below "panel-info-white-border" represents a blue info box, to change this to a colour of your choice, e.g. red use "panel-danger-white-border".

Note that all 23 colours are available for panels/info boxes - see colour classes for more info.

      <div class="col-md-4">
        <div class="panel panel-info-white-border">
          <div class="panel-heading">
            <h3 class="panel-title">info Box</h3>
          </div>
          <div class="panel-body">
            <p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui
            vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
            <div class="btn btn-party">[[Read More]]</div>
          </div>
        </div>
      </div>

Info boxes are perhaps my favourite css class in Bootstrap, they offer multiple uses, but primarily as a means of dividing the page into a traditional website layout (i.e. main content area and sidebar). We use info boxes on every page of this website.

In the examples section we have listed several colours, but you can in fact use any of the colours listed in the Colour Classes page and the same applies to the icons and buttons.

The width of boxes is set by the column class i.e. col-md-4 or for a full page box use col-md-12

Traditional "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons and text when linking to internal articles and [] wiki syntax for external links.

bootstrapskin-commercial-skin.png