Skip to content

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.

Someone famous
<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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<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

<!-- 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

<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

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.
Warning! Better check yourself, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
<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.

Posted in

Michael Davis

Chief brainstormer at I'm Not Marvin, a development agency specializing in WordPress Applications. I've been in web development in one form or another since the late 90's. If I can't be reached I'm probably hitting the trail on my mountain bike.
  1. sween on December 5, 2017 at 1:06 am

    Need to use bootstrap (row columns) inside accordion text editor.

  2. Anh Tran on July 17, 2018 at 7:57 am

    I’m new to BB and just found your article. I didn’t know Bootstrap is included in BB, so I had to add some custom CSS. But everything is much easier with Bootstrap.

    Thanks for the great article.

Reply Cancel