Bootstrap 3 – Doing More with Components

In the previous chapter, we looked at the navigation components, dropdowns, and the Glyphicons that are widely used to create a website with Bootstrap. In this chapter, we will take a look at the remaining components which make web designing very easy.

The following components will be covered in this chapter:

  • Jumbotron
  • Page header
  • Wells
  • Badges
  • Labels
  • Progress bars
  • Panels
  • Thumbnails
  • List groups
  • Button groups and group sizes
  • The Button toolbar
  • Checkbox and radio button groups
  • Alerts
  • Pagination and pager
  • Media objects and the responsive embed attribute

Components to streamline your web designing projects

We will now look at the components that aid in code reusability, thereby adhering to the Don’t Repeat Yourself ( DRY) principle, meaning that these modules can be included in the code. This results in saving time and effort, thereby allowing you to focus on the more imperative things in your projects.

The following code snippet will be used in almost all the code examples:

<!DOCTYPE html>
<html>
<head>
<title>Page Header Segmentation</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>
<style type="text/css">
      #packtpub{
      padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
          }
</style>
</head>

In the preceding code, we defined the required Bootstrap files including the jQuery and the Bootstrap JavaScript file in the <head> section. We also used padding or margins defined in the <style> tags for aesthetic purposes. Hence, we will only see the main code snippet in all the examples in this chapter so that you do not get overwhelmed with coding. Please refer to the code bundle for the entire code.

Jumbotron

Using the Jumbotron component, you can emphasize the key content on your website. Important information can be showcased in addition to increasing the aesthetics of the web page.

Look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<title>Full width JumboTron</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>
<style type="text/css">
    .jumbotron{
      margin-top: 15px;
  padding: 17px;
  color: #990000;
background-color: #FFFFCC;
    }
</style>
</head>
<body>
<div class="jumbotron">
   <div class="container">
       <h1> Packt Publishing </h1>
       <p>Packt is committed to bringing you relevant learning resources for the latest tools and technologies. At <a href="https://www.packtpub.com/" >Packt</a>, our mission is to help the world put software to work in new ways, through the delivery of effective learning and information services to IT professionals</p>
<p><a href="https://www.packtpub.com/all" target="_blank" > Books and Videos </a></p>       
   </div>
</div>
</body>
</html>

The output of the preceding code will be as follows:

As you can see, Packt Publishing and the content relevant to it is emphasized, allocating extra attention to it. We also applied styles to the Jumbotron component by introducing the padding and margin in addition to defining the text as well as the background color. It is a good practice to include the Jumbotron component followed by a container element to remove rounded corners and cover the full width of the viewport.

Page header

The page header component is used to introduce space as well as segment sections of the featured content. It is generally used with the heading 1 ( <h1>) element and extends support to <small> and other elements making it a useful utility in your web design.

Look at the following code snippet to understand this better:

<body >
<div  >
    <h1>Packt Publishing: <small>Always finding a way</small></h1>
</div>
</body>

The output of this code will be as follows:

If you observe the output, you can clearly see the segmentation for the <h1> as well as its <small> default element.

Wells

The well component is used to give an inset effect to the content. Look at the following code to understand it better:

<body >
    <h3><u> Using wells for an inset effect </u></h3>
  <br><hr>    
<div>
    <div class="well"> I formulate infinity </div>
    <div class="well well-lg"> I formulate infinity </div>
    <div > I formulate infinity </div>
</div>
</body>

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

In this code, we defined the size of the well component by defining well-lg and well-sm for the second and third well component resulting in large and small sizes, apart from the default .well class. The . well-lg and .well-sm classes are modifier classes which can be used to control padding and the rounded corners.

Badges

Badges are used for notifications, which indicate things such as unread messages, any new information, and number of e-mails still in the folder. Badges are commonly used in social networking websites, which help the users to know the latest information and updates.

Here is an example code explaining the use of badges to help you understand it better:

<body>
<div >
    <ul class="nav nav-tabs">
        <li><a href="#"> Settings</a></li>
        <li><a href="#"> Contacts</a></li>
        <li><a href="#"> Notifications <span class="badge">19</span></a></li>
        <li class="active"><a href="#">Inbox <span >50</span></a></li>
    </ul>
</div>
</body>

The output of this code upon execution be as follows:

From this code and output, you can observe that we have defined the badges for Notifications and Inbox. Badges can be used on various occasions such as links, nav tabs, and nav pills. In the preceding example, we used badges with nav-tabs.

Labels

Labels are used to depict essential information, which is quite significant and crucial to understand, such as important messages and notes. We can also use contextual colors to further highlight them.

Look at the following code to understand this better:

<body>
<div >
   <h1>Packt Publishing<span class="label label-default"> Deal of the Day </span></h1>
   <h2>Packt Publishing<span class="label label-default"> The Packt guarantee</span></h2>
   <h3>Packt Publishing <span class="label label-default"> Packt Bonanza</span></h3>
   <p>Packt<span class="label label-primary"> Always finding a way</span></p>
   <p>Packt<span class="label label-success"> Online Subscription Service</span></p>
   <p>Packt<span > PacktLib: the Online library</span></p>
</div>
</body>

The output of the code will be as follows:

In this code, we defined the default, primary, success, and information context to the labels resulting in the preceding output.

Progress bars

Progress bars are used to show the status of the workflow or action, thereby helping you to determine the stage of execution. These are widely used, as they indicate the progress of the implemented workflow.

Look at the following code to understand them better:

<body >
    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 70%;">
            <span >70% Complete</span>
        </div>
    </div>
</body>

The output of this code will be as follows:

In the code, we included the .progress-striped and .active classes to the .progress class. If we only use the .progress class, then we would end up with a solid bar denoting the progress. However, by defining the .progress-striped class along with the .active class, the solid bar turns into a striped gradient, whereas the .active class depicts the animation giving it a real-time scenario look.

We can also add contextual alternatives to the progress bar. Look at this example to understand it better:

<body>
<div class="packt">
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success"  style="width: 50%">
      <span class="sr-only">50% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-info" style="width: 30%">
      <span class="sr-only">30% Complete (Info)</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 10%">
      <span >10% Complete (Warning)</span>
    </div>
  </div>
</div>
</body>

The output of the preceding code will be as follows:

As you can clearly see, the preceding output depicts the various stages of progress with the contextual colors enhancing and defining the workflow action status.

Panels

Panels are used to place content in a box. Things such as tips and information boxes on a website can be assigned the panel class to display such information.

Take a look at the following code to help you understand this better:

<body>
<div ">
    <div class="panel panel-default">
        <div class="panel-heading">Packt Publishing </div>
<div ><a href="https://www.packtpub.com/"><strong>Click here</strong></a> to go to the official webpage</div>
    </div>
</div>
</body>

The output of the code will be as follows:

In the preceding code, we defined the panel class and assigned the default attribute to it. We also defined a .panel-heading class for the panel to add a heading container to the panel. In the output, you can see that the information displayed in a box has Packt Publishing as its heading.

Tip

You can also use the .panel-footer class for secondary text, but you need to remember that panel footers don’t inherit colors and borders even if you use contextual colors for it.

We can also use panels along with tables to make it informative for the website users, including adding contextual colors to it to convey the relevant semantics.

Look at the following code to understand this better:

<body>
<div >
           
            <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">Panels with Tables</h3>
  </div>
  <div class="panel-body">  
  <p> Following is a description of varied roles that people play. </p>  
    </div>
  
    <!-- Table -->
    <table >
      <thead>
        <tr>
          
          <th>Name</th>
          <th>Nickname</th>
          <th>Profession</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          
          <td>Aravind Shenoy</td>
          <td>Al</td>
          <td>Technical Content Writer</td>
        </tr>
        <tr>
          
          <td>James Douglas Morrison</td>
          <td>Jim</td>
          <td>Amazing Vocalist</td>
        </tr>
        <tr>
          
          <td>James Marshall Hendrix</td>
          <td>Jimi</td>
          <td>Awesome Guitarist</td>
        </tr>
      </tbody> 
    </table>
  </div>
  </div>
</div>
</body>

The output of this code will be as follows:

Apart from the defined contextual color for panels in the preceding code, you can alternatively use .panel-primary, .panel-info, .panel-warning, and .panel-danger as per your requirement.

Thumbnails

Thumbnails in Bootstrap can be customized to add HTML content and showcase buttons and paragraphs along with the linked images.

Look at the following code to understand this better:

<body >
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="Angular.png" height="133" width="133" alt="AngularJS">
      <div class="caption">
        <h3>AngularJS</h3>
        <p>Streamline your web applications with this hands-on course. From initial structuring to full deployment, you'll learn everything you need to know about AngularJS DOM based frameworks.</p>
        <p><a href="#" class="btn btn-primary" role="button"> E-book</a><a href="#"  role="button">Print + Ebook </a></p>
      </div>
    </div>
  </div>
</div>
</body>

The output of the preceding code will be as follows:

As you can clearly see, the heading, paragraph, and buttons are showcased alongside the thumbnail image. You can also add a caption to it. This kind of attribute is quite useful in shopping portals as you have relevant information related to the showcased products next to the thumbnail.

Pagination

You may have come across the number of pages when you use the search feature to look for some information. Pagination helps you do just that by creating a number of pages for search results for some topic, blog, or forum.

Take a look at the following code example to understand it better:

<body >
<div>
  <div>
        <ul class="pagination pagination-lg">
            <li class="disabled"><span>&laquo;</span></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination">
            <li class="disabled"><span>&laquo;</span></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination pagination-sm">
            <li class="disabled"><span>&laquo;</span></li>
            <li ><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>

The output will be as follows:

In the preceding output, you can see pagination being implemented. Let’s see how it works. We used the .pagination class and implemented different sizes for each pagination, that is, pagination-lg (for larger sizes), pagination (for normal sizes), and pagination-sm (for smaller sizes).

We also used the .disabled class for the first box to denote that it is inactive and there are no pages to go left. Also, we used the .active class to depict the current page. Thus, this feature is awesome for forums and blog posts as well as to divide search results into several web pages for your custom search engine.

To depict the previous page and the next page to keep it simple, we use the .pager class.

Look at the following code snippet to understand this better:

<body  >
<h3><u><strong> Pager styles in Bootstrap </strong></u></h3>
<div>
    <ul class="pager">
        <li class="previous disabled"><a href="#">&larr; Previous</a></li>
        <li ><a href="#">Next &rarr;</a></li>
    </ul>
</div>
</body>
</html>

The output of this code will be as follows:

As you can see, it is quite simple to navigate through the webpage and this feature is very useful if the number of pages is limited and needs to be quickly surfed through.

List groups

The list-group component is used to display complex lists with custom content. You can add badges to lists in addition to using anchor tags instead of list elements. You can also use contextual colors to the lists.

Take a look at the following code so that you can understand this better:

<body >
<div>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <span class="glyphicon glyphicon-log-in"></span> Login 
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-facetime-video"></span> Videos
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-phone"></span> Customer Care 
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-envelope"></span> Mail 
        </a>
        <a href="#" class="list-group-item">
            <span class="glyphicon glyphicon-trash"></span> Trash 
        </a>
       <a href="#" class="list-group-item">
            <span ></span> Logout 
        </a>
    </div>
</div>
</body>

The output will be as follows:

Thus, from the executed code you can see that the list group component helps us use anchor tags and can be used along with Glyphicons to improve the aesthetics. In the preceding code, we used the .list-group class to define the group and we listed the menu by assigning .list-group-item to each item in the group. The Login item is highlighted in blue since we defined the .active class along with it.

Button groups

Button groups are used to combine groups of buttons into a singular line. Using the <div> element, you need to wrap the buttons in a single group using the .btn-group class. We can also allocate the contextual colors to the buttons by adding the appropriate attribute.

Look at the following code to understand this better:

<body>
<div >
    <div class="btn-group">
        <button type="button" class="btn btn-info"> Inbox </button>
        <button type="button" class="btn btn-danger"> Spam </button>
        <button type="button" > New Message </button>
    </div>
</div>
</body>

The output of this code will be as follows:

As you can see, all the buttons are in the same line next to each other. The color of the buttons depends on the contextual color attribute assigned to it.

If you want to vertically stack the buttons instead of a horizontal display, then you need to use the .btn-group-vertical class.

Take a look at the following code snippet so that you can understand it better:

<body>
<div >
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-info"> Inbox </button>
        <button type="button" class="btn btn-warning"> Spam </button>
        <button type="button" > New Message </button>
    </div>
</div>
</body>

The output will be as follows:

Let’s assume that you need buttons of different sizes. You can get it by assigning button sizing classes to each button group instead of assigning the styles for each button.

Look at the code example to understand how it all works:

<body  id= "packt">
<div>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
          <button type="button" class="btn btn-success"> Uno </button>
          <button type="button" class="btn btn-success"> Dos </button>
          <button type="button" class="btn btn-success"> Tres </button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group">
          <button type="button" class="btn btn-success"> Uno </button>
          <button type="button" class="btn btn-success"> Dos </button>
          <button type="button" class="btn btn-success"> Tres </button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-sm">
          <button type="button" class="btn btn-success"> Uno </button>
          <button type="button" class="btn btn-success"> Dos </button>
          <button type="button" class="btn btn-success"> Tres </button>
        </div>
    </div>
    <br>
    <div class="btn-toolbar">
        <div class="btn-group btn-group-xs">
          <button type="button" class="btn btn-success"> Uno </button>
          <button type="button" class="btn btn-success"> Dos</button>
          <button type="button" > Tres  </button>
        </div>
    </div>
</div>
</body>

The output of the code will be as follows:

By adding the .btn-group-lg, .btn-group-sm, and .btn-group-xs classes to the .btn-group class, you can see that the output has buttons of a specific group in different sizes.

The button toolbar

If you want to group all the button groups together to create intricate components, you need to use the .btn-toolbar class.

Look at the following code to understand it better:

<body >
<div>
    <div class="btn-toolbar">
        <div class="btn-group">
           <button type="button" class="btn btn-info"> Alpha </button>
           <button type="button" class="btn btn-info"> Beta </button>
           <button type="button" class="btn btn-info"> Gamma </button>
            
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-success"> Uno </button>
          <button type="button" class="btn btn-success"> Dos </button>
          <button type="button" class="btn btn-success"> Tres </button>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-danger"> One </button>
          <button type="button" class="btn btn-danger"> Two </button>
          <button type="button" > Three </button>
        </div>
    </div>
</div>
</body>

The output of this code will be as follows:

Therefore, you can see that the button groups have been combined using the button toolbar class.

Split button dropdowns

You can create a button drop-down menu in Bootstrap similar to the way you created drop-downs in the previous chapter. In this section, you will learn to create a split button drop-down.

Take a look at the following code to understand it better:

<body class="packt">
<div class="btn-group">
        <button class="btn btn-primary">Packt</button>
        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#"> Books and Videos </a></li>
            <li><a href="#"> Tech Hub </a></li>
            <li><a href="#"> Blog </a></li>
            <li ></li>
            <li><a href="#"> News Center </a></li>
            <li><a href="#"> Contact us </a></li>
            <li><a href="#"> Support </a></li>
        </ul>
    </div>
</body>

On execution, the output of this code will be a Packt button with a caret for the drop-down.

On clicking on the caret, the following drop-down menu will be displayed:

In the preceding code, we’ve created a Packt button and assigned the dropdown attribute to the data-toggle property. Then, we assigned the .btn-primary and .dropdown-toggle classes to it. Next, we created a caret and then defined a drop-down list of items using the .dropdown-menu class for the drop-down menu.

Justifying button groups

We use the .btn-group-justified class alongside the .btn-group class so that the button group spans the entire width of the parent element.

Take a look at the following code snippet to understand it better:

<body class="packt">
<div>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-success"> Uno </a>
        <a href="#" class="btn btn-success"> Dos </a>
        <a href="#" > Tres </a>
    </div>
</div>
</body>

The output of this code will be as follows:

Thus, the button group takes the entire block with a width of the parent element containing it.

Checkbox and radio buttons

Checkbox-styled and radio-styled buttons can be created in Bootstrap with relative ease and with different styles. You can select several checkbox buttons, but you cannot select more than one radio button.

Take a look at the following code so that you can understand the concepts of the checkbox button better:

<body>
<div >
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="checkbox"> Inbox
        </label>
        <label class="btn btn-default">
            <input type="checkbox"> Spam
        </label>
        <label >
            <input type="checkbox"> Compose
        </label>
    </div>
</div>
</body>

The output of this code will be as follows:

If you check the preceding code and the output, the data-toggle="buttons" property helps you to enable a checkbox kind of styling to the buttons in the group. You can also see that the Compose button is pre-checked as the .active class alongside the .btn-default class.

If you click on the Inbox and the Spam buttons, you will see that all three buttons get selected like checkboxes, where you can check multiple values.

Take a look at the following code to understand the procedure of enabling radio-styled functionality to buttons:

<body>
<div id="packt">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="radio" name="options" id="option1"> Radio 1
        </label>
        <label class="btn btn-default">
          <input type="radio" name="options" id="option2"> Radio 2 
        </label>
        <label >
          <input type="radio" name="options" > Radio 3
        </label>
    </div>
</div>
</body>

The output of this code will be as follows:

If you observe the preceding output, the Radio 3 button is highlighted due to the .active class assigned to it. However, unlike the checkbox functionality, you can select only a single radio button at a given time, thereby displaying radio-style functionality.

Alerts

Alerts are used to convey crucial messages for situations where the website users have to be warned, informed, or cautioned, that results in immediate attention from them.

Look at the following code to understand this better:

<body >
<div>
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <em>Information: </em> <u>Bootstrap is an amazing utility</u>
    </div>
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <em>Warning! </em> <u>Malware found</u>
    </div>
     <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <em>Proceed with Caution: </em><u> Website may have viruses and spyware</u>
    </div>
     <div class="alert alert-success">
        <a href="#"  data-dismiss="alert">&times;</a>
        <em>Wow: </em> <u>You won</u>
    </div>
</div>
</body>

The output will be as follows:

As you can see, the alert messages are contextually used according to the relevant scenario.

In the preceding code, you can see that we used the .alert-info, .alert-danger, .alert-warning, and .alert-success classes to convey certain messages. We also defined the data-dismiss="alert" attribute in conjunction with the .close class, which will enable your website users to dismiss the alert. Once you click on the close symbol, the alert will be dismissed owing to the functionality of the Bootstrap JavaScript library.

You can also use the .alert-link class to provide contextual color links with an alert.

Take a look at the following code so that you can understand it better:

<body >
  <div class="alert alert-success">
   
  <a href="#" class="alert-link"> Eureka, Click for the next stage </a>

  </div>

  <div class="alert alert-info">
   
  <a href="#" class="alert-link">Welcome to the Next stage</a>

  </div>

  <div class="alert alert-warning">
   
  <a href="#" class="alert-link"> Caution! You will lose the game </a>

        </div>

  <div class="alert alert-danger">
   
  <a href="#" > Click here to eradicate malware </a>
  
  </div>

</body>

The output of this code will be as follows:

In the preceding code, we created alert links for the web page, which can either redirect the user or take a further step.

Media objects

You can abstract object styles for building components such as blog posts using media objects, wherein the media is aligned alongside textual content. The media can be used inside a list too, which is a handy feature for comments and forums.

Look at the following code to understand this better:

<body >
 <ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <video  class="media-object" width="150" height="100" id= "packt" controls= "controls" autoplay="autoplay">
<source src ="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
</video>
    </a>
    <div class="media-body">
      <h4 >Sample video</h4>
      The following is a video sample to demonstrate the media object feature
    </div>
  </li>
 </ul>
</body>

The output of this code will be as follows:

In the preceding code, we used the .media-list class in which we added the .media class. In this example, we used a video but you can use other media types such as images too. Then we defined the .media-object class and later on we added the relevant textual content inside the .media-body class.

Responsive scalable embed

The responsive embed feature allows browsers to determine video dimensions based on the block they are embedded into by means of a ratio, which helps in scalability depending on the screen size of various devices.

Look at the following code to understand this better:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> Responsive video embed feature </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>
<style type="text/css">
      #packtpub{
       margin-left: 25px;
        margin-top: 30px; 
               }
</style>
</head>
<body >
<div class="container">
 <div class="panel panel-info">
  <div class="panel-heading">
  <p class="panel-title"> Video Embedded in a panel </p>
   <div class="panel-body">
    <div class="embed-responsive embed-responsive-16by9 hidden-xs">
     <iframe  src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></iframe>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

The output will be as follows:

Let’s go through the code to see how it all works. First, we created a panel in which we will embed a video. Then, we defined the panel title, panel heading, and the panel body.

Then, we use the following code to help us embed the video in the panel:


<div class="embed-responsive embed-responsive-16by9 hidden-xs">
     <iframe  src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></iframe>
   </div>

In the highlighted code, we used the 16by9 ratio with the .embed-responsive-16by9 class. Then, we’ve included the .hidden-xs class, which ensures that though the video is responsive and scales according to the device used, the video will be hidden in the extra small device. Within the <iframe> element, we include the .embed-responsive-item class and the source of the video.

If you decrease the screen size by minimizing the width and height of your browser or use a small screen device such as a smart phone or a tablet, then you will observe that the video is responsive and scales accordingly. However, when you decrease the screen size to the extra-small level, the video is hidden and not visible to the users.

In the following screenshot, it is quite obvious that the video is hidden when you decrease the screen size to the xs (extra-small) level:

Comments are closed.