Jump to: navigation, search

Bootstrapskin Panels

Panels

Coloured head and footer (bordered)

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

BootStrap Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Plain head and footer (no border)

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Plain head and footer (bordered)

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.

Coloured head and footer (bordered)

All 23 colours are available to panels, see our article of colour classes to change to your preference.

Take note of the panel classes, these are what determine the border and header colours or the omission of!

See Tips for more info.

    <div class="col-md-4">
      <div class="panel panel-cocktail-border">
        <div class="panel-heading">
          <h3 class="panel-title">BootStrap Panel</h3>
        </div>
        <div class="panel-body">
          <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu,
          sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla
          cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Plain head and footer (no border)

    <div class="col-md-4">
      <div class="panel panel-cocktail-white">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Plain head and footer (bordered)

    <div class="col-md-4">
      <div class="panel panel-cocktail-light-border">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>

Take note of the panel classes, these are what determine the border and coloured header and footer.

I've attempted to make these classes simple to use, though even I found it confusing as there are several other options available in addition to the three most popular panels listed here.

The example below renders a cocktail colours panel, with a cocktail coloured border (see colour classes).

<div class="panel panel-cocktail-border"></div>

Next is a cocktain coloured panel with a white border (i.e. no border).

<div class="panel panel-cocktail-white">

Next is a cocktail coloured panel with a cocktail coloured border, with no solid header and footer.

<div class="panel panel-cocktail-light-border">
bootstrapskin-commercial-skin.png