Using Bootstrap CSS helpers with the Beaver Builder Theme

The Beaver Builder Theme is based on Bootstrap – one of the most popular HTML, CSS and JS frameworks for developing responsive, mobile first, websites. By using standard Bootstrap CSS classes you can add unique stand-out elements to your page.

What is Bootstrap?

Bootstrap is an HTML, CSS and JS framework for developing responsive, mobile first, websites – and Beaver Builder ships with it out of the box.

Whilst BB has lots of modules to do cool things, including awesome row & column modules, Bootstrap has some additional features that are not covered by the plugin. So it’s good to know that you can achieve more by simply using built in Bootstrap code. Being Bootstrap, everything you add is responsive too.

How to use it

Most of what we’re going to use is based on Bootstrap CSS helpers. Applying them to elements on your layout is quite easy and in many cases simply a matter of adding extra CSS classes to your html markup. By using Beaver Builder’s HTML or in some cases, the Text module, you can add these examples to your page quite easily.

Our favorite CSS helpers & components

Transformation classes

Lowercased text.
Uppercased text.
Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Marked text

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Blockquotes

Whilst the WordPress text editor makes it easy to add block quotes, this example makes it easier to add a quote source too.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Horizontal description

CMS

Wordpress

Page builder

Beaver Builder

Description

Save time and stop writing code. Beaver Builder is a powerful and flexible drag and drop design system. Whether you’re a beginner or a seasoned professional, you’re going to love taking control of your website with Beaver Builder.

<dl class="dl-horizontal">
 <dt>...</dt>
 <dd>...</dd>
</dl>

Tables with Striped rows

<table class="table table-striped">
  ...
</table>

Contextual colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Contextual backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Buttons

Default Primary Success Info Warning Danger Link

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Display a Link as a Button

Primary

<a href="#" target="_top" role="button" class="btn btn-primary">Primary</a>

Buttons small and large

Extra small button Small button Default button Large button

<button class="btn btn-primary btn-xs" type="button">Extra small button</button>
<button class="btn btn-primary btn-sm" type="button">Small button</button>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn btn-primary btn-lg" type="button">Large button</button>

Labels

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Alerts

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

This is just a small selection out of the many options Bootstrap has to offer. You can see a full list of bootstrap’s magic here.