How to add Twitter Bootstrap CSS in WordPress using Shortcodes

Adding CSS parts like tooltips, colourful buttons, and roll-over results can lend a hand your content material stand out. The downside is that most of the people don’t understand how to use CSS to add colourful buttons, tables, labels, and so forth. We have proven you ways to add colourful widgets and tables in WordPress. In this newsletter, we will be able to display you ways to use Twitter Bootstrap CSS in WordPress using shortcodes.

Twitter Bootstrap is a CSS and JavaScript framework that is helping spice up your web page design and capability briefly. It used to be evolved via Mark Otto and Jacob Thornton at Twitter as a framework to inspire consistency throughout their interior equipment. Later it used to be launched as an open supply software. It is lovely, easy, and appropriate on all browsers.

First factor you want to do is set up and turn on the WordPress Twitter Bootstrap CSS plugin. Upon activation, the plugin will add a Twitter Bootstrap menu merchandise in your WordPress admin. Clicking on it’s going to take you to plugin’s dashboard.

On the dashboard, you are going to see an terrible lot of ads added via the plugin writer. Scroll down previous them, and you are going to see the shortcodes that you’ll be able to add in your posts. Each shortcode is related to the plugin’s make stronger web page the place you’ll be able to see extra utilization examples of those shortcodes.

Bootstrap shortcode usage examples

Under the Twitter Bootstrap menu merchandise in your admin, there’s a hyperlink to configure Bootstrap CSS settings. Clicking on that can take you to the configuration web page the place you’ll be able to trade the settings to suit your wishes. You have the opportunity to make a selection which Bootstrap CSS model you prefer to to use. Below that you’re going to in finding choices extra suited to advance degree customers.

Now that we’ve got regarded on the configuration, let’s add some bootstrap css parts to a weblog put up. Simply paste the shortcodes like this in your put up or web page content material:


<!--Shortcodes->
[TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn extra[/TBS_BUTTON]
Icons:
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-globe"]
[TBS_ICON class="icon-chevron-right"]
[TBS_ICON class="icon-music"]
[TBS_ICON class="icon-film"]
[TBS_ICON class="icon-user"]
[TBS_ICON class="icon-wrench"]
[TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] 
[TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] 
[TBS_LABEL class="success"]Green: Label[/TBS_LABEL] 
[TBS_ALERT class="success"]Settings stored[/TBS_ALERT]

This is how those shortcodes will seem like in the weblog put up:

Twitter bootstrap css elements added to a post

There are many extra CSS parts that you’ll be able to add to your posts. Tooltips, accordian menus, popup containers, development bars, and so forth. This plugin’s web page has extra documentation on how to use those options. If you’re desirous about icons, then you’ll be able to take a look at Twitter Bootstrap’s reliable web page for the whole set of icons that you’ll be able to use.

We know that theme frameworks like Genesis and others include their very own choices. Do you employ CSS parts in your posts? Let us know via leaving a remark beneath.

Recent Articles

The Best Pinterest Alternatives to Use if You are Bored of Pinterest

Pinterest is a loved social media network among the lover of aesthetics, mostly females tbh. Now, however more and more people are...

Ways you can add links to your Instagram post in 2021

Instagram has many cool features which need no introduction. However, there are a number of features that...

Finance App You should Have on Your iPhone and Android

We live in the age of digitization. When everything is digital, it is no surprise that money has joined the club too....

5 Video Editing Softwares to Try Your Hand at in 2021

Video is the king when it comes to social media. With reels dominating Instagram and Facebook and...

Charge Your Laptop Without a Charger in 5 Ways

Forgetting your laptop charger is a pretty common thing. We all have been there and all of...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here