Site elements
Style
Typography and colors used to style this theme.
Typography
Headlines:
Aa
Raleway
Body:
Aa
Raleway
Get started with Bootstrap
Bootstrap is the world’s most popular framework for building responsive, mobile-first sites.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins.
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Colors
PROJECT PLANS
Since this theme is based on Bootstrap, it includes all Bootstrap itself does. Here you can see components with new aesthetics and some extra styles.
Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion" id="accordionQuestions">
<div class="card shadow mb-2">
<div class="card-header" id="headingOne">
<h3 class="card-title">
<a class="collapsed" role="button" href="#collapseOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Question #1 <i class="fas fa-angle-down float-right rotate-icon" aria-hidden="true"></i>
</a>
</h3>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionQuestions">
<div class="card-body">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
</div>
</div>
</div>
...
</div>
Alerts
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
<i class="fas fa-thumbs-up mr-1"></i>
A simple success alert—check it out!
</div>
...
Avatars
To get a rounded avatar add .avatar and then choose between three different sizes: .avatar-sm, .avatar-md and .avatar-lg.
<img class="avatar avatar-sm" src="img/leo-gill.jpg" alt="Leo Gill">
<img class="avatar avatar-md" src="img/leo-gill.jpg" alt="Leo Gill">
<img class="avatar avatar-lg" src="img/leo-gill.jpg" alt="Leo Gill">
Backgrounds
Skew background
Add a div with the .bg-skew class to include a skew background in a page.
<div class="bg-skew bg-skew-light">
..
</div>
And set the background color using the color utilities.
<div class="bg-skew bg-skew-primary text-white">
..
</div>
Image background
Elegant theme built with Bootstrap
Add .bg-cover to include a responsive background image. Add a div inside with .bg-overlay and .bg-{color} to get a color overlay. Then you can change the opacity with .alpha-#.
<div class="bg-cover d-flex align-items-center position-relative" style="background-image:
url(img/holding-mobile.jpg)">
<div class="bg-overlay bg-dark alpha-7"></div>
<div class="container">
<div class="row">
<div class="col-md-6 py-4">
<h1 class="display-4 text-white py-4 px-4">Elegant theme built with Bootstrap</h1>
</div>
</div>
</div>
</div>
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Testimonials
Boost theme is awesome! We’ve seen amazing results already.
Leo Gill
It really saves me time and effort. Boost theme is exactly what our business has been lacking.
Renee Sims
<div class="row">
<div class="col-md">
<blockquote class="bg-white rounded shadow mb-4 p-4 p-lg-5 text-center">
<img class="avatar avatar-md mb-4" src="img/leo-gill.jpg" alt="Leo Gill">
<p class="text-secondary">Boost theme is awesome! We've seen amazing results already.</p>
<cite class="small text-uppercase">Leo Gill</cite>
</blockquote>
</div>
...
</div>
Buttons
Pill buttons
Add .btn-pill to any button to make them more rounded.
<button type="button" class="btn btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-pill btn-success">Success</button>
...
Cards
Card default
Some quick example text to build on the card title and make up the bulk of the card’s content.
Card rising
Some quick example text to build on the card title and make up the bulk of the card’s content.
Add .card-hover to animate a card on hover.
<div class="card shadow">
<img class="card-img-top" src="img/cactus.jpg" alt="A succulent in a white ceramic pot against a blue wall">
<div class="card-body">
<h5 class="card-title">Card default</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-pill btn-primary btn-sm">Go somewhere</a>
</div>
</div>
<div class="card card-hover">
<img class="card-img-top" src="img/beach.jpg" alt="Sand beach shoreline underneath the blue sky">
<div class="card-body">
<h5 class="card-title">Card rising</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-pill btn-primary btn-sm">Go somewhere</a>
</div>
</div>
Pricing cards
Basic
forever
- 5 downloads / month
- Email support
- No credit card required
- Easy cancellation
Unlimited
per month
- Unlimited downloads
- Online support
- Easy payment
- Easy cancellation
Add .card-featured to highlight a card price.
<div class="card card-price shadow-lg mb-4">
<div class="card-header">
<h3 class="h4 font-weight-normal">Basic</h3>
<div class="d-flex justify-content-center">
<span class="h4 font-weight-normal mt-1">$</span>
<span class="display-4 font-weight-bold">0</span>
</div>
<span class="text-muted">forever</span>
</div>
<div class="card-body">
<ul class="list-unstyled text-secondary mb-4">
<li class="py-2">5 downloads / month</li>
<li class="py-2">Email support</li>
<li class="py-2">No credit card required</li>
<li class="py-2">Easy cancellation</li>
</ul>
<a class="btn btn-pill btn-outline-primary mb-3" href="#">Get started</a>
</div>
</div>
<div class="card card-price card-featured shadow mb-4">
...
</div>
Devices
Minimal iPhone
Showcase your app in a minimal iPhone created in pure CSS adding .iphone-x and .screen.
<div class="iphone-x">
<div class="screen" style="background-image: url(img/screenshot.png)"></div>
</div>
Dropdowns
Navbar dropdown
<nav class="navbar navbar-expand-lg navbar-light" aria-label="Main navigation">
<a class="navbar-brand text-dark" href="index.html">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav align-items-lg-center text-uppercase pt-3 pt-lg-0 ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="DropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<i class="fas fa-angle-down fa-sm ml-1"></i></a>
<div class="dropdown-menu mb-2" aria-labelledby="DropdownMenu">
<a class="dropdown-item" href="#">Subitem</a>
<a class="dropdown-item" href="#">Subitem</a>
</div>
</li>
</ul>
</div>
</nav>
Forms
<form>
<div class="form-group">
<label for="email" class="small text-uppercase">Email address</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="password" class="small text-uppercase">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-pill btn-primary">Submit</button>
</form>
Icons
Boost uses Font Awesome, the world’s most popular and easiest to use icon set.
To add an icon with a background color, add a container with the class icon and the icon-{color}. You can change the icon size adding .icon-sm or .icon-lg. Then include an icon inside with the class .icon-inner.
<span class="icon icon-sm icon-primary">
<i class="icon-inner fas fa-mobile-alt"></i>
</span>
<span class="icon icon-warning">
<i class="icon-inner fas fa-tablet-alt"></i>
</span>
<span class="icon icon-lg icon-success">
<i class="icon-inner fas fa-desktop"></i>
</span>
Links
Links inside paragraphs are underlined. It ensures link visibility when users scan a text and also facilitates link identification for color-blind users.
To highlight a link that is not included in a paragraph add .link-cta.
<a class="link-cta" href="#">Featured link</a>
Pagination
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Tables
Default style
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th class="text-uppercase" scope="col">First</th>
<th class="text-uppercase" scope="col">Last</th>
<th class="text-uppercase" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
Color table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-primary">
<thead class="table-active">
<tr>
<th scope="col">#</th>
<th class="text-uppercase" scope="col">First</th>
<th class="text-uppercase" scope="col">Last</th>
<th class="text-uppercase" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
Pricing table
| Basic
$0
forever |
Standard
$5
per month |
Unlimited
$10
per month |
|
|---|---|---|---|
| Downloads per month |
5 | 15 | Unlimited |
| Email support 24/7 support |
Yes |
Yes |
Yes |
| White Labeling use your branding |
– | Yes |
Yes |
<table class="table shadow pricing-table table-responsive-md">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">
<span class="h4 font-weight-normal">Basic</span>
<div class="d-flex">
<span class="h4 font-weight-normal mt-1">$</span><span class="display-4 font-weight-bold">0</span>
</div>
<small class="d-block text-muted">forever</small>
<a class="btn btn-sm btn-pill btn-outline-primary mt-4" href="#">Get started</a>
</th>
...
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Downloads<br><small class="text-secondary">per month</small></th>
<td>5</td>
<td>15</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Email support<br><small class="text-secondary">24/7 support</small></th>
<td>
<i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
<span class="sr-only">Yes</span>
</td>
<td>
<i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
<span class="sr-only">Yes</span>
</td>
<td>
<i class="far fa-check-circle fa-lg text-success" aria-hidden="true"></i>
<span class="sr-only">Yes</span>
</td>
</tr>
...
</tbody>
</table>
Text
Font family
Quickly change the font family (serif/sans-serif) of text.
Serif font
Sans serif font
<p class="font-serif">Serif font</p>
<p class="font-sans-serif">Sans serif font</p>