Charcoal

A free Bootstrap 4 UI Kit made for quick customizations

Free Download

Brand colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Grid

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

Fonts

h1

h2

h3

h4

h5
h6

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading

Display 1

Display 2

Display 3

Display 4

This is the article lead — it stands out at the start of the article.

This is normal text at the normal size etc...

Sample marked text .

The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.

Someone famous in Dark Magic

Buttons

Default buttons

Buttons with outline

Buttons sizes



Disabled button

The 'a' Element

Checkbox buttons

Radio buttons

Forms

Default form

Vertical form

Horizontal form

Radios
Checkbox

Inline form

@


Form with help text

Your account ID is located at the top of your invoice.

Sizing






Form validation

Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Custom forms

Tables

Default table

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table dark

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table striped

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with border

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with hover

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Table with Head with dark color

Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell

Jumbotron

Container size jumboton

Think BIG with a Bootstrap Jumbotron!

Container fluid size jumbotron

Think BIG with a Bootstrap Jumbotron!

Cards

Boot Polish

Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend the footwear's life, and restore, maintain and improve their appearance.

More

Sun Gone

Here are the top resources for all things related to the Sun.

Sun Gone Still Gone

Sun Gone

Sun disappears!
Photo of sunset

The sun disappeared behind the horizon today. Experts claim it could be gone for good!

Full Report
Sponsored Content

Ugg Boots

Best ugg boots on the planet. Free shipping, 24/7 customer service.

By boots.com
Sun Gone

The top resources for all things related to the Sun.

Sun Gone Still Gone
Sun Up

Looks like the Sun has returned. Here's why.

Tooltip

Inline tooltip

Check out my Grid tutorial, as you never know when you might need it!

All position tooltip

Popovers

All popover position

Badges

Badge heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Button with inline badge



Default badges

Primary Secondary Success Danger Warning Info Light Dark

Badges pill

Primary Secondary Success Danger Warning Info Light Dark

Badges with link

Primary Secondary Success Danger Warning Info Light Dark

Modals

Alerts

Default alert

Dismissible alert

Dismissible alert with fade

Progress bars

Default Progress bar






Striped Progress bar







Animated Progress bar

List group

Default list group

  • These Boots Are Made For Walking
  • Eleanor, Put Your Boots On
  • Puss 'n' Boots
  • Die With Your Boots On
  • Fairies Wear Boots

List group with pills

  • These Boots Are Made For Walking 15
  • Eleanor, Put Your Boots On 38
  • Puss 'n' Boots 76
  • Die With Your Boots On 112
  • Fairies Wear Boots 181

Link List group

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots

Button List group

List group with colors

These Boots Are Made For Walking Eleanor, Put Your Boots On Puss 'n' Boots Die With Your Boots On Fairies Wear Boots Head Over Boots Boot Scootin' Boogie

Image thumbnails

Sample image Sample image Sample image Sample image

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Close icon

Code

Default code

For example, <section> should be wrapped as inline.

Code with pre tag

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

Var tag

y = m x + b

Kbd tag

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Samp tag

This text is meant to be treated as sample output from a computer program.

© 2018 Charcoal Theme. A free Bootstrap 4 UI kit by Wired Dots. Designed by @attacomsian

Photo by Maarten van den Heuvel on Unsplash