loading...

Bootstrap 3 – Ready-made resources and plugins

There are several resources and toolkits to streamline Bootstrap web development. Let’s take a look at the most widely-used and efficient ones that will help you develop your website faster and with great accuracy.

Font Awesome

The Font Awesome library is a collection of hundreds of icons that aid you in building web pages. The scalable vector icons can be customized by CSS in addition to providing high resolution displays. You can either download it or use the Bootstrap CDN at MaxCDN.

In the following example, we’ll be using the CDN to understand how it all works:

<!DOCTYPE html>
<html>
  <head>
    <title>Font Awesome example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style> #packt {padding :40px 40px 40px 40px}</style>
</head>
<body >
<i class="fa fa-camera-retro fa-lg"></i> fa-lg 
<br><i class="fa fa-camera-retro fa-2x"></i> fa-2x 
<br><i class="fa fa-camera-retro fa-3x"></i> fa-3x
<br><i class="fa fa-camera-retro fa-4x"></i> fa-4x
<br><i ></i> fa-5x
</body>
</html>

The output of this code is as follows:

From the output, you can see that we used a camera retro icon. Now you can add the CSS prefix, fa, followed by the icon name. In the example, you can see the icon increasing in size owing to the fa-lg, fa-2x, fa-3x, fa-4x, and fa-5x class assigned to it.

You can download the Font Awesome icons from their official website http://fontawesome.io/.

Social Buttons for Bootstrap

The Social Buttons website http://lipis.github.io/bootstrap-social/ has a collection of all icons related to social media. From Dropbox to Twitter, this includes everything that is prevalent. The dependencies are on Font Awesome and Bootstrap; therefore, you can use the same CDN links used in the Bootstrap and Font Awesome code in addition to incorporating bootstrap-social.css for CSS or bootstrap-social.less for LESS files to get started with it. More relevant information can be found on its official website.

Bootstrap Magic

Bootstrap Magic is a theme editor to create themes quickly. With attributes such as typeahead, auto-complete, and instant live preview, it helps you to build themes in addition to importing the modified LESS variables or saving the CSS and LESS files.

More information can be found on its official website at http://pikock.github.io/bootstrap-magic/app/index.html#!/editor.

Jasny Bootstrap

Jasny Bootstrap is a toolkit that provides additional features and components tailored to help you enhance your Bootstrap web designing projects. Basically, it is an extension to Bootstrap. You can either download the CSS and JavaScript files or use the following CDNs:


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

Take a look at the following simple code example where we add labels to the buttons, thereby enhancing the aesthetics of our web design:

<!DOCTYPE html>
<html>
<head>
<title> Jasny Bootstrap </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</head>
<style> #packt { padding: 35px 35px 35px 35px;} </style>
<body ><br>
<!-- Standard button with label -->
<button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="glyphicon glyphicon-arrow-left"></i></span>Left</button>
<!-- Success button with label -->
<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
<!-- Danger button with label -->
<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i ></i></span>Danger</button>
</body>
</html>

The output of this code upon execution will be as follows:

From the preceding code and the relevant output, it is quite obvious that the styling provided to the buttons results in the Glyphicons being used in conjunction with the buttons.

More information on Jasny Bootstrap can be found on its official website at http://jasny.github.io/bootstrap/.

Fuel UX

Fuel UX extends Bootstrap with JavaScript controls for your application without the bulk or noise. You can either download the files from the Git repository or use the CDN provided on the official website. Fuel UX has dependencies on jQuery and Bootstrap, therefore, you have to include these files before you include the link for the Fuel UX controls.

Take a look at the following code example to see how this works:

<!DOCTYPE html>
<html>
<head>
<title>Spinbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.fuelcdn.com/fuelux/3.0.2/css/fuelux.min.css">
<script src="https://www.fuelcdn.com/fuelux/3.0.2/js/fuelux.min.js"></script>
<style> .packt {padding: 50px 50px 50px 50px;} </style>
</head>
<body class="fuelux packt" >
<h1> Spinbox using Fuel UX </h1><br>
<div class="spinbox" data-initialize="spinbox" >
    <input type="text" class="form-control input-mini spinbox-input">
    <div class="spinbox-buttons btn-group btn-group-vertical">
      <button class="btn btn-primary spinbox-up btn-xs">
        <span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
      </button>
      <button class="btn btn-primary spinbox-down btn-xs">
        <span class="glyphicon glyphicon-chevron-down"></span><span >Decrease</span>
      </button>
    </div>
  </div>
</body>
</html>

The output of this code is as follows:

From the preceding output, you can see the spinbox, wherein you can increase and decrease the numeric count using the up and down arrow respectively.

More information about Fuel UX can be found on its official website at http://exacttarget.github.io/fuelux/index.html.

Bootsnipp

Bootsnipp (http://bootsnipp.com/) is an abundant library of free code snippets and design elements for the Bootstrap framework. It has snippets and samples related to various versions of Bootstrap. Once you click on the Snippets option in the menu bar, you will see a drop-down menu which has snippets according to the various versions of Bootstrap. Let’s say we click on the 3.2.0 option. You will see all the ready-to-use examples.

Let’s say we search for Social Icon Strip Footer by entering the same keywords in the search bar. Click on View and you will see the following screen and the corresponding URL would be http://bootsnipp.com/snippets/featured/social-icon-strip-footer:

In the screenshot, you can view the HTML and CSS files for Social Icon Strip Footer.

Apart from that, you can also select an alternative theme. One more thing to observe is that when you hover over any icon, it gets enlarged and the color changes as per the defined values in your code. Let’s say we select the Cyborg theme and hover over the Google + icon. The theme gets applied and, on hovering over the Google+ icon, you will see the following screen:

More information and snippets can be found on the official website at http://bootsnipp.com/.

Bootdey

Bootdey is a gallery of free snippets and utilities that you can use to streamline your web design with awesome accuracy. The utilities consist of plugins that you can incorporate in your projects and make your website more interactive and responsive, keeping in sync with the mobile-first approach.

Take a look at an example to understand it better. For the following example, we have chosen the Social Post snippet commonly used in blogs, the comments section, or on some Social Media platforms. You can either click on the Social Post link on the opening page or, alternatively, click on http://www.bootdey.com/snippets/view/Social-post-222:

As you can see from the preceding screenshot, the left panel offers the Preview, HTML, CSS, Comments, Information, and Download options. If you click on the HTML option, you can view the entire HTML code for that example as depicted in the following screenshot:

Thus, you can find a lot of tailor-made code for varied purposes ranging from a Support Center page to a gallery of plugins such as Easy Ticker, GMaps JQuery Map Plugin, and Freewall. These plugins will assist you in quick development of specific features, thereby allowing you to focus on the more imperative parts of your projects.

More information can be found on the official website: http://bootdey.com/.

BootBundle

BootBundle is a package of open source as well as commercial themes, templates, components, and other assets with attributes such as responsiveness and cross-browser compatibility. The BootBundle package can be downloaded from its official website (where you can see both free and open source packages) at http://www.bootbundle.com/.

Start Bootstrap

The Start Bootstrap website (http://startbootstrap.com/bootstrap-resources/) consists of all the plugins, resources, and development tools for Bootstrap. Ranging from common third-party Bootstrap jQuery plugins for Forms, Sliders, Tables, Menu, Navigation, Notifications, Modals, and other UI extensions, it is a one-stop hub for all Bootstrap resources.

Comments are closed.

loading...