Five Minute Fix – Well or Panel?

Wells and panels are great features of Bootstrap to help set your content apart from the rest of the page and make it more visually attractive to your visitors. Although they are rather similar, it is important to know which element to use in different situations.

Wells

A well is a simple element that basically puts your content in a little inset, making it look like it has been placed in a shallow “well”. Here is what a well looks like:

Example_Well

To create a well, simply use the following:

Code_Well

Wrapping any element in a container class will create greater margins on the left and right sides of the element, providing for a cleaner look. Removing the outer div will allow the well to take up the entire width of your page. Wells can also be larger or smaller than the default shown above by adding either the  “well-lg” or “well-sm” classes to your element :

Code_Well_Large

Example_Well_Large

Code_Well_Small.PNG

Example_Well_Small

 

Panels

A panel is similar to a well in that it is an element that holds content to set it apart from the rest of the page. What makes a panel different from a well is that panels can include headers and footers. To create a panel, type the following:

Code_Panel_Default.PNG

The heading and the footer divs of the panel are optional and need not be included. The code above represents the default panel, which looks like this:

Example_Panel_Default

The panel element includes six built classes that change the color of the panel depending on the chosen situation. To use one, just replace the “panel-default” class with one of the following:

Code_Panel_Variants.PNG

Example_Panel_Variants.PNG

I did not include the footers in the panels above because they do not change color based on the class. They are intended to be background information for the panel, and not included with the styling of its content. Footers can also be placed above or below the body and header, although the most common place for it is at the bottom of the panel.

 

As you can see, wells and panels are similar elements for displaying content, but panels allow us to achieve extra functionality through the inclusion of headers and footers. I hope this helps identify the difference between these elements so you make sure to choose the right tool for the job.

-Happy coding!

Michal Patriak

 

 

 

Advertisements

Author:

I am a software development student eagerly exploring the software industry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s