Post
Ask Question

Bootstrap Interview Questions

Question 1: What is Bootstrap?

Answer

Bootstrap is the most popular and powerful HTML, CSS, and JavaScript front-end framework for faster and easier use, responsive layout, and mobile-first web development. It includes design templates for UI components like Forms, Buttons, Tables, Navigation, Dropdowns, Alerts, Tabs, Accordion, Carousel and many others with optional JavaScript plugins.

Features of Bootstrap 

  • Easy to use
    Bootstrap is very easy to use. Anyone with the basic knowledge of HTML and CSS can start development with Bootstrap.
  • Open Source
    Bootstrap is completely free to download and use.
  • Browser compatibility
    Bootstrap is compatible with all modern browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and Opera.
  • Responsive features
    By using Bootstrap we can easily create responsive designs for web pages. Bootstrap's responsive CSS makes our web pages appear more appropriately on different devices as it adjusts to phones, tablets, and desktops.

For more details visit the following link,

Question 2: Why choose Bootstrap for building websites?

Answer

Bootstrap is used for building websites for the following reasons,

  • Mobile First Approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
  • Browser Support: It is supported by all popular browsers.
  • Easy to Get Started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
  • Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
  • Provides a clean and uniform solution for building an interface for developers.
  • It contains beautiful and functional built-in components that are easy to customize. It also provides web based customization.

For more details visit the following link,

Question 3: Explain the use of Bootstrap CSS class="navnav-list".

Answer

You need to add the nav-list class in addition to the nav class that will make it look like a list. And adding class nav-header to any element of the nav class will make it look like a heading to the section of links. The HTML File looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <ul class="navnav-list">  
        <li class="nav-header">Category</li>  
        <li><a href="#">.NET</a></li>  
        <li><a href="#">ASP.NET</a></li>  
        <li><a href="#">Silverlight</a></li>  
        <li><a href="#">WCF</a></li>  
        <li class="nav-header">Database</li>  
        <li><a href="#">SQL Server</a></li>  
        <li><a href="#">Oracle</a></li>  
        <li><a href="#">MySQL</a></li>  
    </ul>  
</body>  
  
</html>

Now see how the list is rendering.

see how the list is rendering

For more details visit the following link - 

Question 4: Explain Bootstrap Grid System.

Answer

Bootstrap grid system provides the fastest and easiest way to create layouts of web pages. It introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases. It includes predefined grid classes for making grid layouts for various types of devices, like phones, tablets, desktop, and so on, as well as powerful mixings for generating more semantic layouts.

The Grid Sizes

It has four tiers of classes: xs, sm, md and lg. You can use any combination of these classes to create more dynamic and flexible layouts. The following is the breakdown of the various sizes of these classes.

Classes Devices Size
.col-xs-* Extra Small Phones Less than 768px
.col-sm-* Small Devices Tablets 768px and Up
.col-md-* Medium Devices Desktops 992px and Up
.col-lg-* Large Devices Large Desktops 1200px and Up

Structure of Bootstrap Grid Layout,

Structure of Bootstrap Grid Layout

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns . Here's how the Bootstrap grid system works,

  • Rows must be placed within a .container and .container-fluid class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixings can also be used for more semantic layouts.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

For more details visit the following link,

Question 5: How can you get Bootstrap?

Answer

There are two ways to get Bootstrap on our own web site. 

  • Download Bootstrap.
  • Include Bootstrap from a CDN.

Download Bootstrap

We can download the latest version of Bootstrap. When we click on this link we will see screen like this.

download the latest version of Bootstrap

Now if we click on the Download Bootstrap button, another page will open like this:

click on Download Bootstrap button

There are two versions available for download, compiled Bootstrap and Bootstrap source files.

  • Download Bootstrap
    By clicking on this option, we can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts.
    After downloading, we will unzip the folder and we will find the following subfolders inside that.

    Download Bootstrap
     
  • Download Source
    By clicking on this option, we can get the latest Bootstrap LESS and JavaScript source code.
    For better understanding we'll focus on the compiled Bootstrap files. As the files are compiled and minified we don't have to bother every time including separate files for individual functionality. It will also increase the performance of our website.

Bootstrap CDN

If we don't want to download, we can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap's CSS and JavaScript and also includes jQuery. We can use Bootstrap CDN links,

<!-- Latest compiled and minified CSS -->   
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">   
<!-- jQuery library -->   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>   
<!-- Latest compiled JavaScript -->   
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>   

For more details visit the following link, 

Question 6: What do you understand about Responsive websites?

Answer

The first understanding of Responsive websites that comes to a beginner's mind is that responsive means a website that responds to a user. But actually, responsiveness here means that a website is designed in such a way that it can be used on any platform whether it is a large desktop, laptop, tablet or mobile.

So a responsive website actually is one that responds to the changing width and height of a device or screen.

Benefits of a responsive website 

  • We all know that in today's world, all of the business work can be done using a small device like a tablet or a mobile. So it makes it easier for the user to access the website using a device, thus, increasing the user base and traffic on a website.
  • When the user base increases, it also adds to the increase in the business of the website and the product sale will also increase.
  • Makes it easy for an organization to analyze the user base and its productivity.
  • Increase in the visibility in search engines. This is the major part of the success of an organization.
  • Save time and cost on mobile development.

For more details visit the following link -

Question 7: How can you create a web page using Bootstrap?

Answer

Example:

Using Downloaded Bootstrap

Now we will create an HTML file that displays a "Hello C# Corner" message in our web browser.

Step 1

Creating a Basic HTML file.

First we will open any code editor and create a new html file, and we will write the following code and then save the file name as "hello.html" on the particuler location. We will include HTML5 doctype at the beginning of the page, with the lang attribute and the correct character set. 

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part1</title>  
</head>  
  
<body>  
    <h1>Hello C# Corner</h1>  
</body>  
  
</html>  

Step 2

Bootstrap 3 is mobile-first.

Using Bootstrap 3 we will design our HTML page to be responsive to mobile devices. To ensure proper rendering and enable touch zooming, we will add the following <meta> tag inside the <head> element.

<meta name="viewport" content="width=device-width,initial-scale=1">   

The width=device-width is used to set the width of the page to follow the screen-width of the device. The initial-scale=1 is used to set the initial zoom level when the page is first loaded by the browser.

Now the code will look like this.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part1</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
</head>  
  
<body>  
    <h1>Hello C# Corner</h1>  
</body>  
  
</html>  

Step 3

Making an HTML File a Bootstrap Template.

For making this file a Bootstrap Template, after Downloading Bootstrap by the above procedure we will include Bootstrap CSS and JS files. We should include JS files at the bottom of the HTML page before closing <body> tag. by the following code.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part1</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <h1>Hello C# Corner</h1>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Now we will open the file in a browser by double clicking on it and see the output.

Output

lets see the output

For more details visit the following link -

Question 8: How can you create Fixed Layout with Bootstrap?

Answer

With Bootstrap you can create layouts of web pages based on a fixed number of pixels. To create the fixed yet responsive layout you should start the container with the .container class. Then create the row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be created within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents a grid number.

The following code creates a fixed width responsive layout that is 970px wide on a medium device like desktop and laptop with a screen width ≥992px and 1170px wide on large devices like large desktops with a screen width ≥1200px. However the layout width will be automatically calculated for devices that have a screen width <768px like tablets and cell phones.

HTML Code

<!DOCTYPE html >  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Fixed Layout with Bootstrap</title>  
    <!-- compiled and minified CSS -->  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <!-- Optional theme -->  
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <div class="jumbotron">  
            <h1>Fixed Layout with Bootstrap </h1>  
            <p>With Bootstrap you can create layouts of web pages based on fixed number of pixels. To create the fixed yet responsive layout you should starts container with the .container class. After that create row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be create within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number.</p>  
        </div>  
        <div class="row">  
            <div class="col-sm-4">  
                <h2>HTML</h2>  
                <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basics of HTML, so that you can create your own web pages or website.</p>  
            </div>  
            <div class="col-sm-4">  
                <h2>CSS</h2>  
                <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>  
            </div>  
            <div class="col-sm-4">  
                <h2>Bootstrap</h2>  
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>  
            </div>  
        </div>  
        <hr>  
    </div>  
  
    <!-- compiled and minified JavaScript -->  
    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Result On a tablet, desktop and larger device,

desktop view

Mobile Device

Mobile Device

For more details visit the following link - 

Question 9: How can we create a dropdown menu in Bootstrap?

Answer

To make the menu more attractive with a DropDown list using Bootstrap open up the bootstrap.css file and check out the following Bootstrap CSS class. 

  1. Caret Class
  2. DropDown-Menu Class

1. Using bootstrap CSS class="Caret"

Now first we use the caret class with li tag. The Caret class shows a caret sign. Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this,

.caret   
{  
    display: inline - block;  
    width: 0;  
    height: 0;  
    margin - left: 2 px;  
    vertical - align: middle;  
    border - top: 4 px solid;  
    border - right: 4 px solid transparent;  
    border - left: 4 px solid transparent;  
}

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="navbar-inverse">  
        <div class="Container">  
            <ul class="navnavbar-nav">  
                <li><a href="#">Home</a></li>  
                <li><a href="#about">Technologies</a></li>  
                <li><a href="#contact">Article</a></li>  
                <li><a href="#contact">blog</a></li>  
                <li><a href="#contact">News <b class ="caret"></b></a></li>  
            </ul>  
        </div>  
    </div>  
</body>  
  
</html>

  

The HTML will render without Bootstrap as in the following:

main menu

2. Using bootstrap CSS class="DropDown-Menu"

You now need to add the DropDown-Menu class. Now open the bootstrap.css file and find the DropDown-Menu class. It looks like this,

.dropdown - menu  
{  
    position: absolute;  
    top: 100 % ;  
    left: 0;  
    z - index: 1000;  
    display: none;  
    float: left;  
    min - width: 160 px;  
    padding: 5 px 0;  
    margin: 2 px 0 0;  
    font - size: 14 px;  
    list - style: none;  
    background - color: #ffffff;  
    border: 1 px solid# cccccc;  
    border: 1 px solid rgba(0, 0, 0, 0.15);  
    border - radius: 4 px; -  
    webkit - box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);  
    box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);  
    background - clip: padding - box;  
}

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="navbarnavbar-inverse">  
        <div class="Container">  
            <ul class="navnavbar-nav">  
                <li><a href="#">Home</a></li>  
                <li><a href="#about">Technologies</a></li>  
                <li><a href="#contact">Article</a></li>  
                <li><a href="#contact">blog</a></li>  
                <li class="dropdown"><a href="#" class="dropdown-toggle">News <b class="caret"></b></a>  
                    <ul class="dropdown-menu">  
                        <li><a href="#">Home</a></li>  
                        <li><a href="#">Technologies</a></li>  
                        <li><a href="#">Article</a></li>  
                        <li><a href="#">blog</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </div>  
    </div>  
    <script src="Bootstrap/js/jquery.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/dropdown.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(document).ready(function() {  
            $('.dropdown-toggle').dropdown();  
        });  
    </script>  
</body>  
  
</html>  

The HTML will be rendered with Bootstrap as in the following,

sub menu

For more details visit the following link - 

Question 10: How can you create a menu using navbar-inverse in Bootstrap?

Answer

First create a list using ul and li tags. The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <ul>  
        <li><a href="#">Home</a></li>  
        <li><a href="#about">Technologies</a></li>  
        <li><a href="#contact">Article</a></li>  
        <li><a href="#contact">blog</a></li>  
        <li><a href="#contact">News</a></li>  
    </ul>  
</body>  
  
</html> 

HTML will render without Bootstrap as in the following,

table

Using bootstrap CSS class="navbar-inverse"

You now need to add the navbar-inverse class.

Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this,

.navbar - inverse   
{  
    background - color: #222222;  
    border-color: # 080808;  
}

Now we want to change the background-color with "background-color: #0029ff".

.navbar-inverse {  
    background-color: #0029ff;  
    border-color: #080808;  
}

The HTML file looks  as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="navbar-inverse">  
        <ul>  
            <li><a href="#">Home</a></li>  
            <li><a href="#about">Technologies</a></li>  
            <li><a href="#contact">Article</a></li>  
            <li><a href="#contact">blog</a></li>  
            <li><a href="#contact">News</a></li>  
        </ul>  
    </div>  
</body>  
  
</html> 

The HTML will be rendered with Bootstrap as in the following:

check result

For more details visit the following link -  

Question 11: What are the advantages of Bootstrap?

Answer

There are many advantages of using Bootstrap,

  • Bootstrap Css library takes care of our UI to make  interactive mobile + desktop enabled websites, developers can even create a fully furnished jaw dropping website easily.
  • The speed of development can be increased with the help of Bootstrap.
  • With the increase in mobile first, website designers need to work a lot in order to make the UI adapt to all kinds of devices, whereas with the help of bootstrap this overhead has been reduced to quite an extent.
  • Responsive Grid: As you go in depth with Bootstrap and read about Grid you will see that 12 columns are grids and are responsive and you can make them self-adjusting according to the device.
  • There is a huge list of Components --  Dropdown menu, badges etc. A few have been discussed in this article.
  • Easy to read documentation: I personally believe if you want to learn Bootstrap from scratch https://getbootstrap.com/ documentation is easy and great to start with. I personally appreciate their efforts we can go back to the site whenever we something is  needed in our View.
  • Themes: Bootstrap provides free colorful themes that can be used in our Web Application.
  • Support

For more details visit the following link,

Question 12: What are Containers in Bootstrap?

Answer

In Bootstrap we can contain elements to wrap site contents.

There are two Bootstrap Container classes,

  1. The .container class used to provide a responsive fixed width container.
  2. The .container-fluid class used to provide a full width container.

We have to note that we cannot put a container inside another container since it is not nestable.

Example 1

Using .container class (responsive fixed width container)

In this example we will create a simple Bootstrap page. Using ".container" class we will create a fixed width container that is responsive for different devices. In this we will write some text. We will have some space on the left and right side of the page by writing the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part2</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>This Is Bootstrap Page With Responsive Fixed Width Container</h1>  
        <p>This Container Show Output Of Using (.container) Class</p>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output

container

responsive fixed width container

Example 2

Using .container-fluid class (full width container)

In this example we will create a simple Bootstrap page like Example 1. Using ".container-fluid"class we will create a full width container. In this we will write some text. Now we will create a page by writing the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part2</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container-fluid">  
        <h1>This Is Bootstrap Page With Full Width Container</h1>  
        <p>This Container Show Output Of Using (.container-fluid) Class</p>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output

check output

For more details visit the following link - 

Question 13: Explain the basic structure of the Bootstrap grid.

Answer

Now for creating rows and columns using 12 column responsive grid systems. 

  • First we need to create a container that acts as a wrapper for our rows and columns by using the .container class.
  • Then we have to create rows inside the container by using (<div class="row">) ,
  • Then we need to add the desired number of columns inside any row by using classes .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* the number of columns should always add up to 12 for each row. In these columns we write our contents.

The following is a Basic Structure,

Basic Structure

<div class="container">  
    <div class="row">  
        <div class="col-*-*">col1</div>  
        <div class="col-*-*">col2</div>  
        <div class="col-*-*">col3</div>  
    </div>  
    <div class="row">  
        ...  
    </div>  
</div>

Now we will create some examples for Grid Layouts by which we can easily make responsive website layouts.

Example 1

Two Column Layouts

In this example we will create two column layouts for different devices. In mobile the column will automatically arrange horizontally according to screen size. We know that grid system works on 12 columns, so for creating two column layouts we keep the sum of the grid column numbers equal to 12 in each row so columns will be in one line. In this example we will add three rows and inside each row we will add two columns. Let's create the example.

Step 1

First we will create a Bootstrap Template, HTML page named "TwoColLayout.html" by using the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part3</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Two Column Layouts</h1>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Step 2

Now we will add rows and columns for creating Two Column Layouts by the following code; in this we will give style "background-color" for each column so output shows clearly. 

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part3</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Two Column Layouts</h1>  
        <!--First row with column number(4,8)-->  
        <div class="row">  
            <div class="col-sm-4" style="background-color:#8dc1aa">column1: col-sm-4</div>  
            <div class="col-sm-8" style="background-color:#808080">column2: col-sm-8</div>  
        </div>  
        <!--Second row with column number(6,6)-->  
        <div class="row">  
            <div class="col-sm-6" style="background-color:#cfa6e2">column3: col-sm-6</div>  
            <div class="col-sm-6" style="background-color:#faa76c">column4: col-sm-6</div>  
        </div>  
        <!--Third row with column number(3,9)-->  
        <div class="row">  
            <div class="col-sm-3" style="background-color:#c8fcfc">column5: col-sm-3</div>  
            <div class="col-sm-9" style="background-color: #79ad96">column6: col-sm-9</div>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output

See the output for different devices according to screen size.

Two Column Layouts

For more details visit the following link - 

Question 14: Explain Bootstrap buttons and its styles.

Answer

Buttons play various roles in websites and applications and are used to submit, reset, show and hide on click of button, link button etc.

By using Bootstrap we can easily create and customize the buttons.

Bootstrap Button Styles

In Bootstrap different classes are used for styling the buttons and styles can be applied to any element like <a>, <button> and <input>.

Bootstrap provides seven styles of buttons,

Button

To apply the button styles, Bootstrap provides the following classes,

  • .btn-default - Default gray color Standard button
  • .btn-primary - To indicate primary action button
  • .btn-info - Used for informational alert messages
  • .btn-success - Indicates a successful or positive action
  • .btn-danger - Indicates a dangerous or negative action.
  • .btn-warning - Indicates caution should be taken with this action
  • .btn-link - Button looks like a link while maintaining button behavior

Example

Bootstrap Button Styles,

In this example we will create buttons and by using above classes we will apply styles on buttons through the following code.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part4</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head>  
  
<body>  
    <div class="container">  
        <h1>Button Styles</h1>  
        <!--Button Style1:Default--><button type="button" class="btn btn-default">Default Button</button>  
        <!--Button Style2:Primary--><button type="button" class="btn btn-primary">Primary Button</button>  
        <!--Button Style3:Info--><button type="button" class="btn btn-info">Info Button</button>  
        <!--Button Style4:Success--><button type="button" class="btn btn-success">Success Button</button>  
        <!--Button Style5:Danger--><button type="button" class="btn btn-danger">Danger Button</button>  
        <!--Button Style6:Warning--><button type="button" class="btn btn-warning">Warning Button</button>  
        <!--Button Style7:Link--><button type="button" class="btn btn-link">Link Button</button> </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output

Bootstrap Button Styles

For more details visit the following link - 

Question 15: Explain the Bootstrap basic table?

Answer

The following table elements are used with Bootstrap,

  • <table> - It is used for wrapping element for displaying data in a tabular format
  • <thead> - It is used for container element for table header rows (<tr>) to label table columns.
  • <tbody> - It is used for container element for table rows (<tr>) in the body of the table.
  • <tr> - It is used for container element for a set of table cells (<td> or <th>) that appears on a single row.
  • <th> - Special table cell for column (or row) labels. It must be used within a <thread>
  • <td> - It is used for default table cell.
  • <caption> - It is used for description or summary of what the table holds.

Bootstrap Basic Table

We can create a basic Bootstrap table with basic styling that has a small cell padding and only horizontal dividers by adding Bootstrap class ".table" to the <table> element.

Example

Bootstrap Basic Table using .table class.

In this example we will create a simple table with Bootstrap class and using html table elements we will create an employee table with Fields Sr. No., Employee Name, Email, City by writing the following code.  

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part5</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Bootstrap Basic Table</h1>  
        <!--Bootstrap Basic Table using .table class-->  
        <table class="table">  
            <thead>  
                <tr>  
                    <th>Sr.No.</th>  
                    <th>Emolpyee Name</th>  
                    <th>Email</th>  
                    <th>City</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td>1</td>  
                    <td>Shaili Dashora</td>  
                    <td>[email protected] </td>  
                    <td>Chittorgarh</td>  
                </tr>  
                <tr>  
                    <td>2</td>  
                    <td>Sourabh Somani</td>  
                    <td>[email protected] </td>  
                    <td>Banglore</td>  
                </tr>  
                <tr>  
                    <td>3</td>  
                    <td>Shobhna Singvi</td>  
                    <td>[email protected]</td>  
                    <td>Mumbai</td>  
                </tr>  
            </tbody>  
        </table>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output

Basic Table Layout,

Basic Table Layout

For more details visit the following link - 

Question 16: How can you give a style to images in Bootstrap?

Answer

By using the Bootstrap classes we can easily style images like making images round, cornered, or circular, or we can give a thumbnail effect on images. We have the following classes for image shapes.

  • Rounded Corners - The .img-rounded class used for adding rounded corners to an image.
  • Circle - The .img-circle class used for shaping the image to a circle.
  • Thumbnail - The .img-thumbnail class used for shaping the image to a thumbnail.

Example - Bootstrap Image Shapes

In this example we will give different shapes of images using the above Bootstrap classes, we will put an image inside images folder where our html page exists. After that, we will give shapes on image: Rounded, Circle, or Thumbnail by using the following code.

Output

Bootstrap Image Shapes,

Bootstrap Image Shapes

For more details visit on to following link,

Question 18: What is panel in Bootstrap?

Answer

A panel in bootstrap is a bordered box with some padding around its content. To create a basic panel, we use .panel class to the <div> element, and content inside the panel has a .panel-body class.

Example 1 - Creating Panel

In this example we will create a basic panel by using .panel class to the <div> element and we will write content in the panel by using .panel-body class to the <div> element. In this example we will use .panel-default class for styling of the panel by writing the following code. 

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part7</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h2>Bootstrap Panel</h2>  
        <div class="panel panel-default">  
            <div class="panel-body">Demo Panel</div>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output

panel in Bootstrap

For more details visit the following link - 

Question 19: What is Jumbotron in Bootstrap?

Answer

A Jumbotron provides some different look for a heading or we can say it is used to show some special content or information on the webpages, it is displayed as a gray box with rounded corners. It also increase the font sizes of the text inside it. To create a Jumbotron we use <div> element with class.jumbotron.

Creating Jumbotron Inside Container

We place the Jumbotron component by using .jumbotron class inside the <div> with class .container by which it is not extended to the edge of the screen.

Example - Jumbotron Inside Container

In this example we will create a <div> with .container class, inside it we will add one <div> with class.jumbotron and inside jumbotron we can put any HTML, Bootstrap elements for Heading, Descriptions, etc. We will create jumbotron by writing the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part8</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <!--Creating Jumbotron inside container-->  
        <div class="jumbotron">  
            <h1>Bootstrap Jumbotron</h1>  
            <p>It is Bootstrap Jumbotron inside Container</p>  
            <p><a href="#" class="btn btn-info" role="button">See More Information</a></p>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output Jumbotron inside Container.

Jumbotron

For more details visit the following link - 

Question 20: Explain the Bootstrap progress bar.

Answer

Now we will create different types of progress bars and see how they are useful for webpages.

Basic Progress Bar

We can create a default progress bar, by adding .progress class to a <div> element.

Example - Creating Default Progress Bar

In this example to create a basic progress bar we will add a <div> with class .progress inside the container, now inside this <div>.

We will add one more <div> with class .progress-bar, we will also add width in style attribute that indicates the progress of task or action.

We will add .sr-only class for Progress Bar,

  • .sr-only - It is used to hide an element to all devices except screen readers

We will add following properties for Progress Bar,

  • aria-valuenow - It is used to define the current value for a range for Progress Bar
  • aria-valuemin - It is used to define the minimum allowed value for a range
  • aria-valuemax - It is used to define the maximum allowed value for a range

Let's create an example for Default Progress Bar by writin the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part9</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h3>Basic Bootstrap Progress Bar (30% Complete)</h3>  
        <!-- A <div> element with class .progress -->  
        <div class="progress">  
            <!-- A <div> element with class .progress-bar -->  
            <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">  
                <span class="sr-only">30% Complete Process</span>  
            </div>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output

Creating Default Progress Bar

For more details visit the following link - 

Question 21: What contextual classes are used with progress bars in Bootstrap?

Answer

The contextual classes used with progress bars are:

  • .progress-bar-info
  • .progress-bar-success
  • .progress-bar-danger
  • .progress-bar-warning

Creating Progress Bars with Contextual classes

In this example to create Colored Progress Bars we will add <div> with class .progress inside the container, now inside this <div> we will add one more <div> with class .progress-bar and we will add Contextual classes here like .progress-bar-info,.progress-bar-success,.progress-bar-danger,.progress-bar-warning. We will also add width in style attribute that indicates the progress of the task or action. We will also add aria attributes for progress bar, by writing the following code.  

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part9</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h3>Colored Progress Bars with Contextual classes</h3>  
        <div class="progress">  
            <!-- A <div> element with class .progress-bar and .progress-bar-info -->  
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">  
                30% Complete Process (Info)  
            </div>  
        </div>  
        <div class="progress">  
            <!-- A <div> element with class .progress-bar and .progress-bar-success -->  
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">  
                50% Complete Process (Success)  
            </div>  
        </div>  
        <div class="progress">  
            <!-- A <div> element with class .progress-bar and .progress-bar-danger -->  
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">  
                70% Complete Process (Danger)  
            </div>  
        </div>  
        <div class="progress">  
            <!-- A <div> element with class .progress-bar and .progress-bar-warning -->  
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%">  
                90% Complete Process (Warning)  
            </div>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output

Contextual classes

For more details visit the following link - 

Question 22: Explain Bootstrap Basic Buttons.

Answer

The basic list group is like an unordered list with list items. For creating a Basic List Group use class .list-group to <ul> element, and into this <li> elements.

Example - Basic List Groups

In this example first we will create a <div> with class .container, then for Basic List Group, we will add <ul> element with class .list-group and inside this we will add <li> elements with class .list-group-item, and in this we will add elements of list.

Let’s create a Basic List Group by writing the following code and see the output.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part10</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h3>Basic Bootstrap List Group</h3>  
        <p>FOOD CATEGORY</p>  
        <ul class="list-group">  
            <li class="list-group-item">SWEETS</li>  
            <li class="list-group-item">SNACKS</li>  
            <li class="list-group-item">MISE</li>  
            <li class="list-group-item">REGIONAL</li>  
            <li class="list-group-item">BAKING</li>  
        </ul>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output

Basic List Groups

For more details visit the following link -

Question 23: How can you create Responsive Tables with Bootstrap?

Answer

In Bootstrap 3 we can create a responsive table by using .table-responsive class. The table will scroll horizontally on small devices (screen width under 768px). When viewing on larger than 768px wide, we will not see any difference in tables.

Example - Creating Responsive Table

In this example to make the table responsive we will place the table inside a <div> element and then we will apply the class .table-responsive on it by using the following code.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part5</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <div class="container">  
        <h1>Bootstrap Responsive Table</h1>  
        <!-- Div using .table-responsive class-->  
        <div class="table-responsive">  
            <!--Bootstrap Table using .table class-->  
            <table class="table">  
                <thead>  
                    <tr>  
                        <th>Sr.No.</th>  
                        <th>Emolpyee Name</th>  
                        <th>Salary</th>  
                        <th>City</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <tr>  
                        <td>1</td>  
                        <td>Shaili Dashora</td>  
                        <td>50,000</td>  
                        <td>Banglore</td>  
                    </tr>  
                    <tr>  
                        <td>2</td>  
                        <td>Sourabh Somani</td>  
                        <td>1,20,000</td>  
                        <td>Dehli</td>  
                    </tr>  
                    <tr>  
                        <td>3</td>  
                        <td>Milan</td>  
                        <td>40,000</td>  
                        <td>Udaipur</td>  
                    </tr>  
                    <tr>  
                        <td>4</td>  
                        <td>KumKum</td>  
                        <td>30,000</td>  
                        <td>Banglore</td>  
                    </tr>  
                    <tr>  
                        <td>5</td>  
                        <td>Bhumika</td>  
                        <td>20,000</td>  
                        <td>Udaipur</td>  
                    </tr>  
                </tbody>  
            </table>  
        </div>  
    </div>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Output Responsive Table Layout,

Responsive Table Layout

Responsive Table

For more details visit the following link - 

Question 24: Explain Navigation Bar in Bootstrap.

Answer

The Bootstrap navbar component is used to create a responsive navigation header for our website or application. A navigation bar can collapse or extend, according to the screen size of different devices.

Default Navigation Bar (navbar)

For creating default navbar we need to use <nav class="navbarnavbar-default"> and we can add responsive Default Navigation Bar to the top of the page in any web application.

Example 1 - Creating Default Navbar

Step 1

In this example we will create a default navbar. For this first we will create a basic Bootstrap HTML page by using the following code.

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part11</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Step 2 - Now to create default navbar, 

  • In the <body> of the HTML page we will add <nav> tag with classes .navbar, .navbar-default.
  • Inside this we will add <div> with class .container-fluid.
  • In this we will add one <div> with header class .navbar-header, now we will add <a> element with class navbar-brand. By using this text becomes slightly larger in size.
  • Now for adding links to the navbar we will add unordered list (ul) with the classes .nav, .navbar-nav and provide menu links using <li> element.

Let's create default navbar by using the following code,

<!DOCTYPE html>  
  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part11</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <!--Default Navbar Start Here-->  
    <!--<nav> tag start with classes .navbar and .navbar-default-->  
    <nav class="navbar navbar-default">  
        <div class="container-fluid">  
            <!--Navbar Header Start Here-->  
            <div class="navbar-header">  
                <a class="navbar-brand" href="#">C-sharp Corner</a>  
            </div>  
            <!--Navbar Header End Here-->  
            <!--Menu Start Here-->  
            <ul class="nav navbar-nav">  
                <li class="active"><a href="#">Home</a></li>  
                <li><a href="#">About Us</a></li>  
                <li><a href="#">Technology</a></li>  
                <li><a href="#">Contact Us</a></li>  
            </ul>  
            <!--Menu End Here-->  
        </div>  
    </nav>  
    <!--<nav> tag end-->  
    <!--Default Navbar End Here-->  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Output Default Navigation Bar (navbar).

Default Navigation Bar

For more details visit the following link - 

Question 25: What are the Responsive Utilities Classes in Bootstrap?

Answer

You can use the following responsive classes to enable the element's visibility depending on the device screen sizes.

Class Description
.visible-xs-* The elements visible only on extra small devices having screen width less than 768px. Hidden on others.
.visible-sm-* The elements visible only on small devices having screen width greater than or equal to 768px. Hidden on others.
.visible-md-* The elements visible only on medium devices having screen width greater than or equal to 992px. Hidden on others.
.visible-lg-* The elements visible only on larger devices having screen width greater than or equal to 1200px. Hidden on others.

Note

You can also mix these classes to make the elements visible on multiple devices.

HTML Code

<!DOCTYPE html >  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Responsive</title>  
    <!-- compiled and minified CSS -->  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <!-- Optional theme -->  
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">  
</head>  
  
<body>  
    <p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>  
    <p class="visible-sm-block">This paragraph is visible only on small devices.</p>  
    <p class="visible-md-block">This paragraph is visible only on medium devices.</p>  
    <p class="visible-lg-block">This paragraph is visible only on large devices.</p>  
    <!-- compiled and minified JavaScript -->  
    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Similarly you can use these hidden utility classes to hide the elements depending on the devices.

Class Description
.hidden-xs-* Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm-* Hide the elements only on small devices having screen width greater than or equal to 768px. Visible on others.
.hidden-md-* Hide the elements only on medium devices having screen width greater than or equal to 992px. Visible on others.
.hidden-lg-* Hide the elements only on larger devices having screen width greater than or equal to 1200px. Visible on others.

Code

  1. <p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>   
  2. <p class="hidden-sm">This paragraph is hidden only on small devices.</p>   
  3. <p class="hidden-md">This paragraph is hidden only on medium devices.</p>   
  4. <p class="hidden-lg">This paragraph is hidden only on large devices.</p>   

For more details visit the following link - 

Question 26: Explain Layout in Bootstrap

Answer

Twitter Bootstrap Layout has two different layouts. The first is fixed layout and the second is fluid layout. Bootstrap has added the responsive features for phone, tablets and websites that are a perfect view for large-screen desktops to small-screen desktops.

Fixed/ Grid Layout

If we are looking for a webpage or app layout on a fixed number of size (pixels), then we choose fixed layout.

<body>  
    <div class="container">  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
        <p> Hello World !</p>  
    </div>  
</body> 

Grid Layout

Fluid Layout

If we want to create a layout that is not fixed, not on the basis of percentage to keep it flexible, then we choose fluid layout.

<div class="container-fluid">  
    <div class="row-fluid">  
        <div class="span2">  
            <p>Hello </p>  
            <p>Hello </p>  
            <p>Hello </p>  
            <p>Hello </p>  
            <p>Hello </p>  
        </div>  
        <div class="span10">  
            <p>World !</p>  
            <p>World !</p>  
            <p>World !</p>  
            <p>World !</p>  
            <p>World !</p>
        </div>  
    </div>  
</div>

  

Fluid Layout

For more details visit the following link - 

Question 27: How can you create forms using Twitter Bootstrap?

Answer

To make the forms more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class.

  1. Vertical Form (default form layout)
  2. Horizontal Form
  3. Inline Form

1. Using default form layout

Now first we use the form tag with label and TextBox. The HTML file looks as in the following,  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="dist/js/bootstrap.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <form>  
        <div>  
            <label for="inputUserName">UserName</label>  
            <input type="email" id="inputEmail" placeholder="UserName">  
        </div>  
        <div>  
            <label for="inputPassword">Password</label>  
            <input type="password" id="inputPassword" placeholder="Password">  
        </div>  
        <div class="checkbox">  
            <label><input type="checkbox"> Remember me</label>  
        </div>  
        <button type="submit">Login</button>  
    </form>  
</body>  
  
</html>

The HTML will render without Bootstrap as in the following,

Using default form layout

2. Using bootstrap CSS class="Horizontal Form"

In the horizontal form layout the label in the right is floated to the left to make them appear on the same line as form controls. To make a form that uses the Horizontal layout, 

  • Add .form-horizontal to the <form> element
  • Wrap labels and form controls in .control-group
  • Add .control-label to the <label> element

The list groups class is used to display lists of items in a beautiful manner. To do that you can use a list-group-item class with every item.

The HTML file looks as in the following,

<form class="form-horizontal">  
    <div class="form-group">  
        <label for="inputUserName" class="control-label">UserName</label>  
        <input type="email" id="inputUserName" placeholder="UserName">  
    </div>  
    <div class="form-group">  
        <label for="inputPassword" class="control-label">Password</label>  
        <input type="password" id="inputPassword" placeholder="Password">  
    </div>  
    <div class="checkbox">  
        <label>  
        <input type="checkbox">Remember me</label>  
    </div>  
    <button type="submit">Login</button>  
</form>

The HTML will render without Bootstrap as in the following,

design

3. Using bootstrap CSS class="Inline Form"

To make a form where all the elements are inline just add Inline Form class with the form tag. You can do this by simply applying the Bootstrap's class Inline Form:

The HTML file looks as in the following,

<form class="form-inline">  
    <div class="form-group">  
        <label for="inputUserName">  
UserName</label>  
        <input type="email" id="inputEmail" class="form-control" placeholder="UserName">  
    </div>  
    <div class="form-group">  
        <label for="inputPassword">  
Password</label>  
        <input type="password" id="inputPassword" class="form-control" placeholder="Password">  
    </div>  
    <div class="checkbox">  
        <label>  
<input type="checkbox">  
Remember me</label>  
    </div>  
    <button type="submit">  
Login</button>  
</form>

The HTML will render without Bootstrap as in the following,

render without Bootstrap

For more details visit the following link - 

Question 28: How can you create a simple Navbar with Twitter Bootstrap?

Answer

You can create various variations of navbars quickly and without too much effort. The procedure is listed below:,

  • Create nav container with class .navigation and .navbar-default.
  • For better mobile display you need to create a container with the class .navbar-header. Inside this container, you can create a button to toggle the menu items using data-target.
  • Now, you can create your menu item list container. This container has the same id as data-target and the class is .collapse and .navbar-collapse.
  • Create menu list with ul li structure with the class .nav and .navbar-nav.

The following example will you show how to create a static navbar with basic navigation.

HTML Code

<nav role="navigation" class="navbar navbar-default">  
    <!-- Brand and toggle get grouped for better mobile display -->  
    <div class="navbar-header">  
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  
        <a href="#" class="navbar-brand">C# Corner</a> </div>  
    <!-- Collection of nav links and other content for toggling -->  
    <div id="navbarCollapse" class="collapse navbar-collapse">  
        <ul class="nav navbar-nav">  
            <li class="active"><a href="#">Home</a></li>  
            <li><a href="#">Article</a></li>  
            <li><a href="#">Technologies</a></li>  
        </ul>  
        <ul class="nav navbar-nav navbar-right">  
            <li><a href="#">Login</a></li>  
        </ul>  
    </div>  
</nav>

Result

Display

Mobile Display

Mobile Display

For more details visit the following link - 

Question 29: Explain the history of Bootstrap and what languages are required to start Bootstrap.

Answer

History of Bootstrap - Bootstrap began as an internal project at Twitter hence sometimes Bootstrap is known as “Twitter Bootstrap”. Two guys named Mark Otto and Jacob Thornton got management approval to open source it.

Language Required when starting Bootstrap: Knowledge of HTML, CSS and JavaScript.

Now Start With Bootstrap: The coding starts with <!DOCTYPE html>, it shows the version of HTML that we use.

<!DOCTYPE html>   
<html>   
…………..   
………..   
</html>

To ensure proper rendering and touch zooming, add the viewport meta tag to <Head>.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">   

First program with Bootstrap, 

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>First</title>  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <style>  
        body {  
            background-color: #00F;  
        }  
          
        h3 {  
            color: #CCC;  
        }  
    </style>  
    <meta name="viewport" content="width= device-width,initial-scale=1">  
    <script src="js/bootstrap.min.js"></script>  
</head>  
  
<body>  
    <h3>HAPPY NEW YEAR 2015 We hope you are blessed with delight, fulfillment, and peace in this New Year. May the love and warmth carry you into the New Year with a joyful spirit and hopeful heart.On New Year's Day and every day, we wish you joy and fulfillment. May it brings health, prosperity and happiness to all.</h3>  
</body>  
  
</html> 

Output

history of Bootstrap

For more details visit the following link - 

Question 30: How many types of screens can be in Grid System?

Answer

Bootstrap has the cool feature of being able to resize automatically based on the screen size of devices. We can organize content in multiple columns when using large screen devices but when we are using small screen devices we need to customize the columns to prevent loss of content and also to look good of our applications or websites.

Grid System

We have four types of screens

  • col-xs extra small screen size in devices such as smartphones (<768 px).
  • col-sm small screen size in devices such as tablets (>=768 px).
  • col-md medium screen size in devices such as laptops (>=992 px).
  • col-lg large screen size in devices such as computers (>=1200 px).

For more details visit the following link -

Question 31: What is Glyphicons in Bootstrap?

Answer

Glyphicons are icons we use to make our web page more attractive. For example, when we open a signup page then we see a user icon before a text box, this icon is glyphicon.

text box

Syntax

The syntax to add Glyphicons to a web page is,

<span class="glyphiconglyphicon-name"></span>

Some glyphicons are,

glyphicons

The following is an example of using it.   

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        Glyphicons  
    </title>  
    <link rel="stylesheet" href="js/css/bootstrap.min.css">  
    <script src="js/bootstrap.min.js"></script>  
    <meta name="viewport" content="width= device-width, initial-scale=1">  
    <style>  
        body {  
            text-align: center;  
            color: #006;  
            background-color: #CCC;  
        }  
    </style>  
</head>  
  
<body>  
    User Name <span class="glyphicon glyphicon-user"></span><br> Contact No <span class="glyphicon glyphicon-phone"></span><br> Address <span class="glyphicon glyphicon-home"></span><br> Download  
    <a href="#">  
        <span class="glyphicon glyphicon-download"></span></a><br>  
    <button type="button" class="btn btn-default btn-md">   
<span class="glyphicon glyphicon-cloud-upload">Upload</span>   
</button>  
</body>  
  
</html>

Output

see output

For more details visit the following link -

Question 32: Give the syntax of buttons in Bootstrap.

Answer

Syntax of Button

<button type="button" class="btn btn-size">
<span class="glyphicon glyphicon-name"></span></button>

  • Default
  • Info
  • Primary
  • Danger
  • success
  • warning

Default Button Syntax

<button type=”button” class=”btn btn-default btn-size”>Default</button>

Info Button Syntax

<button type=”button” class=”btn btn-Info btn-size”>Info</button>

Primary Button Syntax

<button type=”button” class=”btn btn-primary btn-size”>Primary</button>

Danger Button Syntax

<button type=”button” class=”btn btn-Danger btn-size”>Danger</button>

Success Button Syntax

<button type=”button” class=”btn btn-Success btn-size”>Success</button>

Warning Button Syntax

<button type=”button” class=”btn btn-Warning btn-size”>Warning</button>

For more details visit the following link -

Question 33: Explain media objects in Bootstrap.

Answer

If you want to create a layout like blog comments that contain a left- or right-aligned image along with the textual content, you can do that easily through the newly introduced Bootstrap media component, like this.

HTML Code 

<div class="media">  
    <a href="#" class="pull-left">  
        <img src="image.png" class="media-object">  
    </a>  
    <div class="media-body">  
        <h4 class="media-heading">Vipin Kumar <small><i>Posted on September 02, 2014</i></small></h4>  
        <p> The first part Getting started with Bootstrap provided a basic introduction of bootstrap and bootstrap layout.</p>  
    </div>  
</div> 

Result

media objects in Bootstrap

Note

You can also create a list of media objects or nested media objects using the media list component. It can be useful for comment threads or article lists.

For more details visit the following link - 

Question 34: What is Bootstrap Snippet Pack?

Answer

Bootstrap Snippet Pack has a collection of Bootstrap snippets for Visual Studio.

Very often, web developers need to minimize their development environment then go to the Bootstrap website to find a piece of HTML for a specific component.

Doing this all day reduces the developer productivity since he must switch back and forth between the browser and the development environment.

Fortunately, with Bootstrap Snippet Pack, a code snippet can be retrieved via Visual Studio.

To install the Bootstrap Snippet Pack from Visual Studio, go to Tools, then Extensions and Updates > Online > Search Bootstrap Snippet Pack.

Search Bootstrap Snippet Pack

Once installed from Visual Studio editor, hit CTL+K, CTL+X to bring in the snippet tool.

snippet tool

Then select Bootstrap and the component needed.

select Bootstrap

The Bootstrap Snippet Pack will automatically generate the required HTML.

Bootstrap Snippet Pack

For more details visit the following link - 

Question 35: How can you make an HTML File a Bootstrap Template?

Answer

For making this file a Bootstrap Template, after Downloading Bootstrap by the above procedure we will include Bootstrap CSS and JS files. We should include JS files at the bottom of the HTML page before closing <body> tag with the following code.

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="utf-8">  
    <title>Bootstrap Part1</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
</head>  
  
<body>  
    <h1>Hello C# Corner</h1>  
    <script src="js/jquery-2.1.4.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
</body>  
  
</html>

Now we will open the file in a browser by double clicking on it and see the output.

Output

see the output

For more details visit the following link - 

Question 36: What is Twitter Bootstrap? Explain with an example.

Answer

Twitter Bootstrap is a very popular and powerful front-end framework currently. It is self-generated for faster and easier web development. Twitter Bootstrap comes prepared with HTML, CSS and JavaScript for various web and user interface components. Bootstrap provides iconography, dropdowns, navigation, alerts, popovers and much more. This is covered in detail in the section Layout Components.

Creating Your First Web Page with Twitter Bootstrap

You have learned the structure and the purposes of Bootstrap files, now we'll create a basic Bootstrap template that includes everything we specified in the file structure. You will have made an HTML file that displays a "Welcome Bootstrap" message in your web browser.

Step 1

Creating a Basic HTML File.

Open up your code editor and create a new HTML file. Start with an empty window and type the following code,

<!DOCTYPE html >  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Basic HTML</title>  
</head>  
  
<body>  
    <h1>Welcome Bootstrap</h1>  
</body>  
  
</html> 

Result

Creating a Basic HTML File

Step 2

Making this HTML File a Bootstrapped Template

To make this HTML file a Bootstrapped template, just include the appropriate Bootstrap CSS and JavaScript files.

Note

You should include JavaScript files at the bottom of the page; before closing the <body> tag (in other words </body>) to improve the performance of your web pages. 

<!DOCTYPE html >  
<html>  
  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>HTML with Bootstrap</title>  
    <!-- compiled and minified CSS -->  
    <link rel="stylesheet" href="css/bootstrap.min.css">  
    <!-- Optional theme -->  
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">  
</head>  
  
<body>  
    <h1>Welcome Bootstrap</h1>  
    <!-- compiled and minified JavaScript -->  
    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
</body>  
  
</html> 

Result

Creating a Basic HTML File

For more details visit the following link - 

Question 37: Explain Validation States with Twitter Bootstrap?

Answer

Bootstrap provides an easy-to-use and powerful mechanism for styling input controls to present various validation states. Bootstrap includes validation styles for error, warning and success messages. To use, just add the appropriate class to the surrounding .form-group.

The following shows Twitter Bootstrap Form Validation States.

HTML Code

<form class="form-horizontal">  
    <div class="form-group has-success">  
        <label class="col-xs-2 control-label" for="inputSuccess">Username</label>  
        <div class="col-xs-10">  
            <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">  
            <span class="help-block">Username is available</span>  
        </div>  
    </div>  
    <div class="form-group has-warning">  
        <label class="col-xs-2 control-label" for="inputWarning">Password</label>  
        <div class="col-xs-10">  
            <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">  
            <span class="help-block">Password strength: Weak</span>  
        </div>  
    </div>  
    <div class="form-group has-error">  
        <label class="col-xs-2 control-label" for="inputError">Email</label>  
        <div class="col-xs-10">  
            <input type="email" id="inputError" class="form-control" placeholder="Input with error">  
            <span class="help-block">Please enter a valid email address</span>  
        </div>  
    </div>  
</form> 

Result

Making this HTML File

For more details visit the following link – 

Question 38: How do you create panels with Twitter Bootstrap?

Answer

Sometimes you might need to put your content in a box for a certain reason. In such a condition we can use panel components. In the most basic form the panel component applies a border and padding around the content. The following example will you show how to create simple panels.

HTML Code

<div class="panel panel-default">   
<div class="panel-body">Look, I'm in a panel!</div>   
</div>

Result

Validation States

You can also add a heading to your panel with the .panel-heading class.

HTML Code

<div class="panel panel-default">  
    <div class="panel-heading">Heading Page</div>  
    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, leo vel venenatis finibus, purus nisl varius arcu, vel pulvinar turpis sapien at sapien. </div>  
</div>

Result

see result

Panels with Contextual States

In Twitter Bootstrap you can also add contextual classes like .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger on the panel components to make it more meaningful and to draw the attention of the user.

HTML Code

<div class="panel panel-primary">  
    <div class="panel-heading">  
        <h3 class="panel-title">Primary</h3>  
    </div>  
    <div class="panel-body">The requested page has been permanently moved to a new location.</div>  
</div>  
<div class="panel panel-success">  
    <div class="panel-heading">  
        <h3 class="panel-title">Success</h3>  
    </div>  
    <div class="panel-body">The server successfully processed the request.</div>  
</div>  
<div class="panel panel-info">  
    <div class="panel-heading">  
        <h3 class="panel-title">info</h3>  
    </div>  
    <div class="panel-body">The client should continue with its request.</div>  
</div>  
<div class="panel panel-warning">  
    <div class="panel-heading">  
        <h3 class="panel-title">Warning</h3>  
    </div>  
    <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>  
</div>  
<div class="panel panel-danger">  
    <div class="panel-heading">  
        <h3 class="panel-title">Danger</h3>  
    </div>  
    <div class="panel-body">The server is temporarily unable to handle the request.</div>  
</div>

Result

create panels

For more details visit the following link - 

Question 39: How can you customize the CSS of Bootstrap?

Answer

Customize:

Contextual States

customize CSS of Bootstrap

Here you can customize you CSS of Bootstrap like color, border, font size, font style and many more. And at the bottom of this page, there is a compile and download button that will download the Bootstrap files to your local machine.

When you download the file, extract this file and you will see this.

download

Just copy them to the root directory of your web application.

For more details visit the following link -

Question 40: What is Twitter Bootstrap Pagination?

Answer - Pagination is the process of organizing content by dividing it into separate pages. The following example shows you how to create various types of pagination.

HTML Code 

<h3> Simple Pagination </h3>  
<ul class="pagination">  
    <li><a href="#">«</a></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="#">»</a></li>  
</ul>  
<h3> Pagination with Disabled and Active States </h3>  
<ul class="pagination">  
    <li class="disabled"><a href="#">«</a></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="#">»</a></li>  
</ul>  
<h3>Different Sizes of Pagination</h3>  
<!-- Larger pagination -->  
<ul class="pagination pagination-lg">  
    <li><a href="#">«</a></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="#">»</a></li>  
</ul>  
<!-- Default pagination -->  
<ul class="pagination">  
    <li><a href="#">«</a></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="#">»</a></li>  
</ul>  
<!-- Smaller pagination -->  
<ul class="pagination pagination-sm">  
    <li><a href="#">«</a></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="#">»</a></li>  
</ul> 

Result

download the file

Twitter Bootstrap Pager

In Bootstrap you can create a pager (Previous and Next links) on your website. For creating a pager with Bootstrap you can add a Bootstrap class .pager in the ul li structure.

HTML Code

<ul class="pager">  
    <li><a href="#">Previous</a></li>  
    <li><a href="#">Next</a></li>  
</ul> 

Result

Twitter Bootstrap Pager

Note

You can create an alignment of the pager using the .previous and .next class and you can disable the links using the .disable class.

For more details visit the following link - 

Question 41: What is a Bootstrap Breadcrumb?

Answer

A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. The following example shows how to create breadcrumbs.

HTML Code

<ul class="breadcrumb">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">Products</a></li>  
    <li class="active">Accessories</li>  
</ul> 

Result

bootstrap breadcrumb

For more details visit the following link - 

Question 42: What are Bootstrap Badges?

Answer - Badges are small and simple components for displaying an indicator or to count some sort of number. This is very useful for mail count and notification etc.

Example

<html>  
  
<head>  
    <title>Example of Badges</title>  
    <link href="bootstrap.css" rel="stylesheet">  
</head>  
  
<body>  
    <div class="Container">  
        <div class="Row">  
            <div class="Span">  
                <p><span class="badge">1</span></p>  
                <p><span class="badge badge-success">2</span></p>  
                <p><span class="badge badge-warning">4</span></p>  
                <p><span class="badge badge-important">6</span></p>  
                <p><span class="badge badge-info">8</span></p>  
                <p><span class="badge badge-inverse">10</span></p>  
            </div>  
        </div>  
    </div>  
</body>  
  
</html>

Output

bootstrap badges

For more details visit the following link - 

Question 43: How can you create a Header using Bootstrap?

Answer

Using Twitter Bootstrap, you may create static navigation menus. To create a menu using Bootstrap open up the bootstrap.css file and check out the CSS class navbar-nav. The HTML file looks as in the following,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="https://www.w3.org/1999/xhtml">  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
</head>  
  
<body>  
    <div class="Container">  
        <ul class="nav navbar-nav">  
            <li><a href="#">Home</a></li>  
            <li><a href="#about">Technologies</a></li>  
            <li><a href="#contact">Article</a></li>  
            <li><a href="#contact">blog</a></li>  
            <li><a href="#contact">News</a></li>  
        </ul>  
    </div>  
</body>  
  
</html>  

The HTML will be rendered with Bootstrap as in the following,

create a Header using Bootstrap

For more details visit the following link - 

Question 44: How can you create a Footer using Bootstrap?

Answer

Using Twitter Bootstrap, you may create static footer menus. To create a footer using Bootstrap open up the bootstrap.css file and check out the following CSS class and update it with the following code. 

.container   
{  
    width: 100 % ;  
}  
.text - muted  
{  
    color: Black;  
    background - color: red;  
    height: 40 px;  
    text - align: center;  
}

The HTML file looks as in the following,

<div id="footer">  
    <div class="container">  
        <p class="text-muted credit">  
            CONTACT US PRIVACY POLICY TERMS & CONDITIONS SITEMAP</p>  
    </div>  
</div>

The HTML will be rendered with Bootstrap as in the following,

rendered with Bootstrap

For more details visit the following link - 

Question 45: How can you create Rating Control with Bootstrap?

Answer

Step 1

Download the CSS and JavaScript files from github.com.

Step 2

Open your Visual Studio, then add your downloaded file into your project then add index.aspx page and call your necessary files within the head tag from that downloaded folder.

<head runat="server">  
    <title></title>  
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
    <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="Bootstrap/js/star-rating.js"></script>  
</head> 

Step 3

Now call your rating control.

<div class="row">  
    <div class="col-lg-12">  
  
        <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl">  
        <hr>  
        <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
        <hr>  
        <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
        <hr>  
        <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
        <hr>  
        <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">  
        <hr>  
    </div>  
</div>

Here, value is your filled start on page load, min is the minimum star value, max is the maximum star or maximum rating, data-size is your rating control size.

Step 4

Now we can see how to get the rated value from this rating control using jQuery as in the following,

<script>  
    $(document).ready(function()   
    {  
        $("#input-21b").on("rating.change", function(event, value, caption)   
        {  
            alert("You rated: " + value + " = " + $(caption).text());  
        });  
    });  
</script>  

Step 5

Let's see how to get the rated value from code behind in C#. Add one hidden field in your design page and assign your rated value into your hidden field.

<asp:HiddenField ID="hdfRatingValue" runat="server" />

Now assign your rated value into your hidden field. Let's see how to do this using jQuery.

<script>  
    $(document).ready(function()   
    {  
        $("#input-21b").on("rating.change", function(event, value, caption)   
        {  
  
            var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
            ratingValue = value;  
            alert(ratingValue);  
        });  
    });  
</script>  

Now you can get the rating value from code behind. Type hdfRating.value and save your value to the database.

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>  
  
    <!DOCTYPE html>  
  
    <html xmlns="https://www.w3.org/1999/xhtml">  
  
    <head runat="server">  
        <title></title>  
        <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
        <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
        <script src="Bootstrap/js/star-rating.js"></script>  
  
        <script>  
            $(document).ready(function() {  
                $("#input-21b").on("rating.change", function(event, value, caption) {  
  
                    var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
                    ratingValue = value;  
                    alert(ratingValue);  
                });  
            });  
        </script>  
    </head>  
  
    <body>  
        <form id="form1" runat="server">  
            <div>  
  
                <div class="row">  
                    <div class="col-lg-12">  
  
                        <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl">  
                        <hr>  
                        <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
                        <hr>  
                        <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
                        <hr>  
                        <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
                        <hr>  
                        <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs">  
                        <hr>  
                    </div>  
                </div>  
  
            </div>  
            <asp:HiddenField ID="hdfRatingValue" runat="server" />  
        </form>  
    </body>
</html>

CS Code

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace RatingControl   
{  
    public partial class index: System.Web.UI.Page   
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
  
        }  
        public void saveRating()  
        {  
            string val = hdfRatingValue.Value;  
        }  
    }  
}

Output

create Rating Control

For more details visit the following link - 

Question 46: Explain File Structure of Bootstrap.

Answer

After downloading the Bootstrap files, unzip the compressed folder to see the structure. You'll find the following file structure and contents.

File Structure of Bootstrap

You can see that the compiled version of Bootstrap provides compiled CSS and JavaScript files (bootstrap.*), as well as compiled and minified CSS and JavaScript (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts files includes 200 icons from the Glyphicon Halflings set.

For more details visit the following link -

Question 47: Explain Bootstrap Sortable.

Answer

Bootstrap Sortable is a jQuery extension for Bootstrap that adds the capability of sorting rows of your Bootstrap tables.

Features

  • Sorts table data alphabetically.
  • Sorts table data by numbers.
  • Sorts table data by dates. (Requires Momont.js).
  • Allows disabling sorting for a specific table column.

Botstrap Sortable

For more details visit the following link -

Question 48: How can we make Customize Buttons?

Answer

To make Customize Buttons more attractive than default buttons using Bootstrap, open the bootstrap.css file and check out the following Bootstrap CSS class. 

  1. btn-default
  2. btn-success
  3. btn-info
  4. btn-warning
  5. btn-danger
  6. btn-sm

1. Using Bootstrap CSS class="btn-default"

Now first we use the btn-default clsss. Now open the bootstrap.css file and find the btn-default class. It looks like this,

.btn-default {  
background-color: #FFFFFF;  
border-color: #CCCCCC;  
color: #333333;  

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>  
    <style>  
  
    </style>  
</head>  
  
<body>  
    <button type="button">Default</button>  
    <button type="button" class="btn-default">btn-default Class</button>  
</body>  
  
</html>  

The HTML will be rendered with Bootstrap as in the following:

HTML will be rendered with Bootstrap

2. Using bootstrap CSS classbtn-info, btn-warning, btn-danger, btn-sm

The HTML file looks as in the following,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
  
<head>  
    <title></title>  
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
    <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
    <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>  
    <style>  
  
    </style>  
</head>  
  
<body>  
    <button type="button">  
Default</button>  
    <br />  
    <br />    
    <button type="button" class="btn-default">btn-default Class</button>  
    <br />  
    <br />    
    <button type="button" class="btn-success">btn-success Class</button>  
    <br />  
    <br />    
    <button type="button" class="btn-info">btn-info Class</button>  
    <br />  
    <br />    
    <button type="button" class="btn-warning">btn-warning Class</button>  
    <br />  
    <br />    
    <button type="button" class="btn-danger">btn-danger Class</button>  
    <br />  
    <br />    
    <button type="button" class="btn-sm">btn-sm Class</button>  
</body>  
  
</html>

The HTML will be rendered with Bootstrap as in the following,

result

For more details visit the following link - 

Question 49: Explain Alignment Classes in Bootstrap.

Answer

Alignment classes are used to align the text.

Example

<div class="container">  
    <divclassdivclass="row">  
        <div class="col-lg-12 h1 text-center">Alignment Classes</div>  
</div>  
<div class="row">  
    <!--Here style for paragraph -->  
    <div class="col-xs-12">  
        <p class="text-left">Left Text</p>  
        <p class="text-center">Centered Text</p>  
        <p class="text-right">Right Text</p>  
        <p class="text-justify">Justified Text</p>  
        <p class="text-nowrap">No Wrap Text</p>  
    </div>  
</div>  
</div>

  

Block quotes

Block quotes - Quoting block of another source content into your content

Use a Footer tag for naming the source,

<div classdivclass="container">  
    <div classdivclass="row">  
        <divclassdivclass="col-lg-12 h1 text-center">Blockquotes and Footer</div>  
  
            </div>  
            <divclassdivclass="row">  
                <!--Here style for paragraph -->  
                <divclassdivclass="col-xs-12">  
                    <blockquote>Learning Bootstrap Step by Step</blockquote>  
                    <footer>- https://getbootstrap.com/css</footer>  
                </div>
            </div>  
        </div>
    </div>
</div>

run

For more details visit the following link - 

Question 50: How can you create a panel group?

Answer

We can group many panels together, by wrapping a <div> with class .panel-group around them. The.panel-group class clears the bottom-margin of each panel.

Creating Panel Group

In this example we will create Panels and Group it by using .panel-group class by writing the following code.  

<DOCTYPE html>  
  
    <html lang="en">  
  
    <head>  
        <meta charset="utf-8">  
        <title>Bootstrap Part7</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1">  
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
    </head>  
  
    <body>  
        <div class="container">  
            <h2>Bootstrap Panel Group</h2>  
            <!--Panel Group Start-->  
            <div class="panel-group">  
                <!--Panel 1 Start-->  
                <div class="panel panel-default">  
                    <div class="panel-heading">Panel 1 Heading</div>  
                    <div class="panel-body">Panel Content</div>  
                </div>  
                <!--Panel 1 End-->  
                <!--Panel 2 Start-->  
                <div class="panel panel-default">  
                    <div class="panel-heading">Panel 2 Heading</div>  
                    <div class="panel-body">Panel Content</div>  
                </div>  
                <!--Panel 2 End-->  
                <!--Panel 3 Start-->  
                <div class="panel panel-default">  
                    <div class="panel-heading">Panel 3 Heading</div>  
                    <div class="panel-body">Panel Content</div>  
                </div>  
                <!--Panel 3 End-->  
                <!--Panel 4 Start-->  
                <div class="panel panel-default">  
                    <div class="panel-heading">Panel 4 Heading</div>  
                    <div class="panel-body">Panel Content</div>  
                </div>  
                <!--Panel 4 End-->  
            </div>  
            <!--Panel Group End-->  
        </div>  
        <script src="js/jquery-2.1.4.min.js"></script>  
        <script src="js/bootstrap.min.js"></script>  
    </body>  
  
</html>

Output

Output

For more details visit the following link - 

Read my free e-book on .NET Interview Questions and Answers,

Thanks for reading this article -- follow me and stay tuned with me on C# corner for more new updates.

More Interview Questions


Similar Articles