We use panels. We use them a lot. We love them, we really do.

Panels are really easy to recreate; we use a few simple Bootstrap classes in combination with div elements to create them.
The classes we use in our panels are:

• panel
• panel-default
• panel-heading
• panel-title
• panel-body
• panel-footer

We don't always use the class panel-footer, but you can if you want to.

Panels are really easy to use. First, we create one div element; we'll give it two classes, panel and panel-default.

<div class="panel panel-default">

</div>

Now we've got our first element ready; we're going to add a header to our panel. This is really easy; we just add a new div element to our existing div element. We have to give this element the class panel-heading. Our HTML code should look something like this.

<div class="panel panel-default">
	<div class="panel-heading">

	</div>
</div>

As you might have guessed, we want to add a title to our panel; this is really easy as well. Inside our panel-header, we want to add a simple span element and give it the class panel-title. It should look something like this.

<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">MyTitle</span>
	</div>
</div>

Well done! You're more than halfway through this quick tutorial to become a Bootstrap panel master! We only need to add content to our panel. This is really easy as well! However, this time we're not going to add a div element to the previous div, but we're going to add this div to the first one we created. In short, we're going to create a new div element, give it a class, this time class panel-body and then we're going to add it to the div with classes panel panel-default. Your code should look something like this.

<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">MyTitle</span>
	</div>
	<div class="panel-body">
		MyContent
	</div>
</div>

You're now ready to create Bootstrap panels! Your content can go in the last div we've created.

Don't go yet! There's one more thing I need to teach you. If you want, you can add panel footers! They're really easy, just like the previous steps we've taken.
First off, we start creating a new div element; we do not create it in our panel-body div but we create it right under this div. Your code should look something like this.

<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">MyTitle</span>
	</div>
	<div class="panel-body">
		MyContent
	</div>
	<div class="panel-footer">
		MyFooter
	</div>
</div>

Well done! You are now a Bootstrap panel master! But before you go, recently we've added snippets to our solution. We've got a snippet that generates the HTML code for a panel for you! We haven't added the HTML for a footer because we don't usually add footers to our panels, but this might change in the future.
If you want to learn how to use snippets in Visual Studio you can click the link below for more information.