Components

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

                        
                            <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

Leo Gill Leo Gill Leo Gill

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.

Someone famous in Source Title
                        
                            <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.

Someone famous in Source Title
                        
                            <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

Leo Gill

Boost theme is awesome! We've seen amazing results already.

Leo Gill
Renee Sims

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

A succulent in a white ceramic pot against a blue wall
Card default

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Sand beach shoreline underneath the blue sky
Card rising

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

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

$0
forever
  • 5 downloads / month
  • Email support
  • No credit card required
  • Easy cancellation
Get started

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>
                        
                    

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>
                        
                    

See all available icons.


Links inside paragraphs are underlined. It ensures link visibility when users scan a text and also facilitates link identification for color-blind users.

Featured link

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 @twitter
                        
                            <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 @twitter
                        
                            <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 Get started
Standard
$5
per month Get started
Unlimited
$10
per month Get started
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>