Bootstrap Panels

ByWalter Wimberly

Panels are similar to Bootstrap alerts, but on steroids. Instead of a simple line or two of text, a panel will include a header section, as well as a body. This will give it a more prominent look that will allow it to stand out.

You can have more than just a line of text. This means you can add paragraphs, or even a table of information.

A most basic example of such would be:


  

    Basic panel example

This example would not have a title section, and be similar in function to a Bootstrap Alert.

Notice that they have a class of panel for the outside div, and panel-<color type> for the inner section. The interior div has a class of panel-body. It does not need to use the color type, as that is determined in the outer div’s class.

Typically however, you would use a panel header. Bootstrap’s website shows their examples with an H3 tag being used in their panel headers. An example of that code would look like:


  

    
The Title for This Panel

  

  

    Generic panel content...

You can further style the panel content by using paragraphs, and other markup text within the panel-body portion.

Panel Footer

You can also include a footer for your panel, although it is kinda of rare to see in production. A case where you might want to use this is if you ran into a situation where you were quoting someone, and you wanted to put the source, or a resource link, in the footer to designate who you were attributing the quote/information too.

To your panel, you would add a new div with a class of panel-footer. This would end of looking something like:


  

    Generic panel content
  

  
My special panel footer

Lists and Tables

Alternately, you can also display lists and tables in the panel body.

You can have a table below the panel-content, or instead of it.

If there is a section with panel-content, then a border is added to the section to separate the panel-content body’s content from the table. The table would be after the close of the panel-content div. No special classes need to be added to the table.

If there is no div for the panel body, and the table is the content, then the table once again does not need a special class.

A list can be added to a panel in a similar manner. Like with a table, you can have it without adding a special panel class, although it is suggested that you add a class of list-group to make the content full width.

    
    
  • Cras justo odio
    • 
    
  • Dapibus ac facilisis in
    • 
    
  • Morbi leo risus
    • 
    
  • Porta ac consectetur ac
    • 
    
  • Vestibulum at eros
    •

Bootstrap Panels was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts