This step by step tutorial shows how to learn bootstrap quickly and how to integrate the Bootstrap framework into an existing website. We’ll start with one of the default website templates in visual studio community 2015. We’ll then integrate some Bootstrap layout examples into it. At the end of this tutorial, the reader will know the Bootstrap’s fundamentals and should be able to use it in his work.
The tutorial will be divided into 7 sections:
Section 1. Why should we choose Bootstrap
Choosing a framework is often crucial for the developer. “Why do I will choose this one instead of that another one, both of them seems to do the same thing”. You’re totally right and here are some keys that you should know about Bootstrap.
-
Bootstrap is the most popular framework for building modern responsive app (mobile included).
-
There is a large support over the Bootstrap’s web community, the official website (http://getbootstrap.com/) offers a lot of information on the framework and it is a well documented project.
-
Bootstrap is an extensible framework, it comes with two parts: the css and the javascript parts. The css part can be customized to suit our needs or just kept as is. Since Bootstrap uses the well known Jquery core framework, the javascript part allows the developer to use javascript. Similarly to Jquery UI’s plugins, a lot of Bootstrap’s components (official or third party) are available for free and are most often ready to use.
-
Bootstrap is also built over Html5 and Css3. It is compatible with almost browsers in the market including mobile devices and tablets.
Section 2. Initializing the solution
For the sake and simplicity, we will start with the default website generated by visual studio Community 2015.
From Menu File > New > Web Site …
In the left pane, select Installed > Templates > Visual C#
In the middle pane, select .NET Framework 4.5 and the choose “Asp.NET Web Site (Razor v3)”, give a name to the new website and finally click “Ok” to create it.
The website solution looks like
![introbootstrap_scr_1]()
The most relevant components in this tutorial are:
– the Content folder is all about css files
– the Scripts folder contains all javascript files
– _SiteLayout.cshtml file is the common layout (the master page) of all web pages.
The website contains three main pages: Default.cshtml, Contact.cshtml, About.cshtml and each of them are referenced in the website menu.
![introbootstrap_scr_2]()
Section 3: How to add Bootstrap to a website
The minimal requirement to use bootstrap on our site is to add the bootstrap stylesheet and javascript to our solution. At the time of writing, the stable version is v3.3.7 and it can be downloaded at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Tips: Instead of downloading the full file, some developers prefer to make a direct link to Bootstrap CDN server. Both two methods are working, just consider the case the internet connection falls down and external references can’t be reached. In this tutorial we will use the minified version.
Let’s now examine the actual main layout file _SiteLayout.cshtml
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>@Page.Title – My ASP.NET Web Page</title>
<link href=”~/Content/themes/base/jquery.ui.all.css” rel=”stylesheet” type=”text/css” />
<link href=”~/Content/Site.css” rel=”stylesheet” type=”text/css” />
<link href=”~/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<script src=”~/Scripts/jquery-ui-1.10.3.js”></script>
<script src=”~/Scripts/modernizr-2.6.2.js”></script>
<meta name=”viewport” content=”width=device-width” />
</head>
Since we want Bootstrap to manage styles and also need to ensure the responsiveness of our website, we remove the jquery.ui.all.css definitely.
The file Site.css contains customized style. At this stage, we also remove it to let Bootstrap the only style manager.
After adding the Bootstrap components, the updated part looks like
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>@Page.Title – My ASP.NET Web Page</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” />
<link href=”~/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script src=”~/Scripts/modernizr-2.6.2.js”></script>
<meta name=”viewport” content=”width=device-width” />
</head>
![introbootstrap_scr_3]()
The content is now in disorder, this is normal because we hadn’t configure anything yet. We will apply Bootstrap’s layout as we go along this tutorial.
Note: the second meta element (<meta http-equiv="X-UA-Compatible" content="IE=edge">) ensures the compatibility with IE Edge browser.
Before continuing, let’s talk about some fundamental keys on Bootstrap.
Section 4: Bootstrap fundamental
Key 0: Bootstrap container
A container is like a “big box” inside which we put multiple “small boxes”. In Bootstrap language, container is just all div having the css class “container”. There’s actually two type of css container class: “container” and “container-fluid”
The only difference is that the second takes all of the viewport’s width. Viewport is the all surface where an html page is displayed.
Tips: To make your work easy, it is strongly recommended to avoid nested container.
Key 1: The Boostrap grid system
Bootstrap classifies devices into 4 groups according to their width.
– Extra small devices (< 768px)
– Small devices tablets (>=768px)
– Medium devices (>=992px)
– Large devices (>=1200px)
The display may vary depending on the device width and Bootstrap will automatically adapt the website layout following that parameter. This is what we called responsiveness.
Key 2: Bootstrap row css class
An element (generally a div) having the special “row” css class will take 100% of its container’s width. Think the container as an html table, a row always takes 100% of the table’s width.
Key 3: Bootstrap column css class
Column is a subdivision of a row and it’s content (any html element) always stands inside a row. In Bootstrap, a row can be splited up to 12 columns. This is well explained by the figure below (from the official bootstrap page).
![introbootstrap_scr_4]()
Css columns have the following naming rules: col-DEVICE_PREFIX–NUMBER
where
– DEVICE_PREFIX is the type of the targeted device:
|
Device type
|
DEVICE_PREFIX value
|
|
Extra small devices
|
xs
|
|
Small devices tablets
|
sm
|
|
Medium devices
|
md
|
|
Large devices
|
lg
|
– NUMBER indicates how many column unit the element will take horizontally. This is relative to it’s container. As we’ve said so far, there is 12 possible subdivisions of a row so the number is in the range from 1 to 12.
We can assign multiple columns CSS class to an element provided that all device’s prefix differ from each other. That allows us to give multiple behavior for the same element based on the device type. This is how Bootstrap manages the responsiveness of our website.
To illustrate this point let’s have a look at this code:
<div class=”row” style=”background-color:lightpink;”>
<span id=”span1″ class=”col-xs-10 col-md-8 col-lg-6″ style=”background-color:blue;”>Span 1</span>
<span id=”span2″ class=”col-xs-2 col-md-4 col-lg-6″ style=”background-color:yellow;”>Span 2 2</span>
</div>
On extra small devices, span1 will take 10 columns units ( col-xs-12) and only 2 columns units for span2 ( col-xs-2)
When displaying in a medium device, span1 will stretch to 8 columns units ( col-md-8) against 4 columns units for span2 ( col-md-4)
Span1 and span2 have the same width on a large device since they both are col-lg-6
The illustration below shows the real rendering of the above code on an extra small device
![introbootstrap_scr_5]()
Tips: Note that when the content doesn’t fit over the horizontal space, the container expands his height while remaining inside it’s row container and without overlapping the next container.
With those previous pieces in hands, we’ll build the menu bar of our website.
Section 5: Building the website menu
We will change the old menu to the most famous Bootstrap menu: a fixed navigation bar containing all menus to each respective pages. On a desktop device we want the menu to be fixed at the top of the viewport and showing all available links. On a mobile device, the menu only contains the name of the website at its left side and all the menu items are expanding when tapping the button at the right side.
Actual menu:
![introbootstrap_scr_6]()
Expected result on a desktop:
![introbootstrap_scr_7]()
Expected result on a mobile device:
![introbootstrap_scr_8]()
![introbootstrap_scr_9]()
Code:
To achieve that goal, we need to copy the following code and insert it just after the body element of the page _SiteLayout.cshtml
<nav class=”navbar navbar-inverse navbar-fixed-top” >
<div class=”container”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>Your logo here</a>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>
<div class=”collapse navbar-collapse” id=”navbar”>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”~/”>Home</a></li>
<li><a href=”~/About”>About</a></li>
<li><a href=”~/Contact”>Contact</a></li>
<li><a href=”~/Account/Register”>Register</a></li>
<li><a href=”~/Account/Login”>Log in</a></li>
</ul>
</div>
</div>
</nav>
Comments:
The HTML5 nav element is used as the global container for the navigation bar. It has the following Bootstrap css classes:
– navbar: manages the general behavior of the nav component
– navbar-inverse: apply a dark background, we can also use navbar-default to have a white background
– navbar-fixed-top: the nav element will always stay at the top of the viewport even vertical scrolling happens. An alternative is to use navbar-static-top for a non fixed navbar. Instead of the -top suffix, we can use -bottom, the navbar will be displayed at the bottom of the viewport.
We then declare a div “container” to contain all the navigation bar elements.
The navbar-header ensures that this part of the navigation bar is always visible whatever the device type is.
– navbar-brand: the website brand stands inside this css class. It just manages the positioning of the brand as show in the definition below:
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
The button element is only visible for extra small and small devices. The navbar-toggle class gives it the float right property, the collapse class tells that the content is hidden by default (always for small device type). The data-target attribute is pointing to the Id of the content that is display when tapping on the button (prefixed with # sign). The button element also contains three spans, it only displays three icon bars inside it.
The main container of the menu elements is the div having id=”navbar”. It is collapsed by default (class collapse) and the navbar-collapse class is mandatory for responsive capabilities (actually this class uses css media queries to display/hide the content depending on the viewport device). We choose an ul element to contain our menu list. The navbar-nav class displays the menu items horizontally and the navbar-right forces them to display on the right ( only visible on the medium and extra large device, if navbar-left is used, they display on the left just after the brand).
We have seen how to implement a typical Bootstrap navigation bar. It only involves few modifications on the main layout page. Before continuing into the next section, copy and past the final code below into the file _SiteLayout.cshtml
*Notice that we’ve included a footer as the same way we did for the top navigation bar.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>New @Page.Title – My ASP.NET Web Page</title>
<link href=”~/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” />
<script src=”~/Scripts/jquery-1.10.2.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script src=”~/Scripts/modernizr-2.6.2.js”></script>
<meta name=”viewport” content=”width=device-width” />
</head>
<body>
<nav class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<a class=”navbar-brand” href=”#”>Your logo here</a>
<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#navbar”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>
<div class=”collapse navbar-collapse” id=”navbar”>
<ul class=”nav navbar-nav navbar-right”>
<li><a href=”~/”>Home</a></li>
<li><a href=”~/About”>About</a></li>
<li><a href=”~/Contact”>Contact</a></li>
<li><a href=”~/Account/Register”>Register</a></li>
<li><a href=”~/Account/Login”>Log in</a></li>
</ul>
</div>
</div>
</nav>
<div id=”body”>
@RenderSection(“featured”, required: false)
@RenderBody()
</div>
<nav class=”navbar navbar-inverse navbar-fixed-bottom”>
<div class=”container”>
<div class=”navbar-header”>
<p>© @DateTime.Now.Year – My ASP.NET Web Page</p>
</div>
</div>
</nav>
@RenderSection(“Scripts”, required: false)
</body>
</html>
Section 6: Applying Bootstrap layout to the web page body
The actual home page looks like the figure below (after the previous section)
![introbootstrap_scr_10]()
In this step, we will apply some basic layout to the webp age body. As we’ve seen so far, it is always a good practice to use a container for each major part of the website. We will do so by adding the “container” class to the body element (_SiteLayout.cshtml).
<div id=”body” class=”container”>
@RenderSection(“featured”, required: false)
@RenderBody()
</div>
The result is:
![introbootstrap_scr_11]()
The container class adds a padding left and right to the container block, the padding value depends on the viewport width. It also apply a margin property to the block. Bootstrap actually uses css media queries to determine the suitable display for the current device.
Section 7: Applying the Bootstrap grid system
We have talk about the Bootstrap grid system at the section 1. In this section, we’re going to arrange each page content to follow a predefined grid rule. Since we’re expecting a responsive website, we always need to consider how should the content be displayed across devices.
The Default.cshtml file is updated as follow (modifications are highlighted to simplify reading)
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Home Page”;
}
@section featured {
<section class=”featured row“>
<div class=”col-xs-12 col-md-12 col-ld-12“>
<hgroup class=”title”>
<h1>@Page.Title.</h1>
<h2>Modify this template to jump-start your ASP.NET Web Pages application.</h2>
</hgroup>
<p>
To learn more about ASP.NET Web Pages, visit
<a href=”http://asp.net/webpages” title=”ASP.NET Web Pages Website”>http://asp.net/webpages</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET Web Pages.
If you have any questions about ASP.NET Web Pages, visit
<a href=”http://forums.iis.net/1166.aspx” title=”ASP.NET Web Pages Forum”>our forums</a>.
</p>
</div>
</section>
}
<div class=”row”>
<h3>We suggest the following:</h3>
<ol class=”round”>
<li class=”one col-ld-4 col-md-12 col-xs-12” >
<h5>Getting Started</h5>
ASP.NET Web Pages and the new Razor syntax provide a fast, approachable, and lightweight way to combine server code with HTML
to create dynamic web content. Connect to databases, add video, link to social networking sites, and include many more features
that let you create beautiful sites using the latest web standards.
<a href=”http://go.microsoft.com/fwlink/?LinkId=245139″>Learn more…</a>
</li>
<li class=”two col-ld-4 col-md-6 col-xs-12“>
<h5>Add NuGet packages and jump start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href=”http://go.microsoft.com/fwlink/?LinkId=245140″>Learn more…</a>
</li>
<li class=”three col-ld-4 col-md-6 col-xs-12“>
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
<a href=”http://go.microsoft.com/fwlink/?LinkId=245143″>Learn more…</a>
</li>
</ol>
</div>
By adding the “row” class to the section element and creating a new div (also has a row class too) below it, we want those two blocks to be independent each from other. Each part will take the full width of the current viewport and will be displayed vertically in the same order as they are declared inside the DOM tree.
We then control how each part should render on the viewport by using col-xs- (for extra small device – smartphones included), col-md- (medium device – probably any normal desktop screen) and col-ld- ( for very large screen resolution)
As example, we affect the col-md-12 and col-xs-12 class to the first li. It means that when displaying on a medium screen or on a smartphone that li takes 100% of the available width but reduced at only 25% of the total width on an extra large device ( col-ld-4). The second and third li have both a col-md-6 class, each of them will take 50% of their container (remember 12 is 100% width), they will then showed side by side.
Result :
On a medium device, LI region are surrounded by orange rectangle.
![introbootstrap_scr_12]()
On a small device
![introbootstrap_scr_13]()
Tips: For a better user experience, it is advised to always use col-xs-12 for small devices especially when the block content is quite large.
Since the website is responsive, there’s no need to refresh the web page to apply the correct display. When the device’s screen threshold is reached, Bootstrap automatically rearranges the view to satisfy the new design.
The Contact page Contacts.cshtml
The new content is now, changes are highlighted.
@{
Layout = “~/_SiteLayout.cshtml”;
Page.Title = “Contact”;
}
<hgroup class=”title”>
<h1> </h1>
</hgroup>
<hr />
<div class=”row”>
<section class=”contact col-xs-12“>
<header>
<h3>Phone:</h3>
</header>
<p>
<span class=”glyphicon glyphicon-phone-alt” aria-hidden=”true”></span>
<span>425.555.0100</span>
</p>
<p>
<span class=”glyphicon glyphicon glyphicon-phone” aria-hidden=”true”></span>
<span>425.555.0199</span>
</p>
</section>
</div>
<div class=”row”>
<section class=”contact col-xs-12“>
<header>
<h3>Email:</h3>
</header>
<p>
<span >Support:</span>
<span><a href=”mailto:Support@example.com”>Support@example.com</a></span>
</p>
<p>
<span >Marketing:</span>
<span><a href=”mailto:Marketing@example.com”>Marketing@example.com</a></span>
</p>
<p>
<span >General:</span>
<span><a href=”mailto:General@example.com”>General@example.com</a></span>
</p>
</section>
</div>
<div class=”row”>
<section class=”contact col-xs-12“>
<header>
<h3>Address:</h3>
</header>
<p>
One Microsoft Way<br />
Redmond, WA 98052-6399
</p>
</section>
</div>
Result:
On medium and large devices
![introbootstrap_scr_14]()
On mobile device
![introbootstrap_scr_15]()
The modification is quite simple, we just put each section inside a new div container (div having the row class). Each section is configured for extra small devices only(col-xs-12 had been used). In Bootstrap we can target specific devices and totally ignore the rest, the default behavior remains for other devices. Finally we’ve added some Bootstrap icons. As we can see Boostrap is not only limited to the grid system, it can manage all pieces of your website including layout, templates , forms, banner, images, icons, label, animations etc. There’s also a lot of plugins that you can download and use into your website. This is exactly what we well see in the next part of the tutorial.
Section 8. Building forms
With Bootstrap building responsive and pretty web forms was never so easy. Bootstrap comes with a lot of ready-to-use css classes that can be customized at our convenience.
We’ll work on the register page to illustrate the general concept.
Actual Register page ( ~/Account/Register.cshtml)
![introbootstrap_scr_16]()
The most common way to place a pair of label and control components inside a form is shown as following:
<form>
<div class=”form-group“>
<label for=”email”>Email address</label>
<input type=”email” class=”form-control” id=”email” placeholder=”email”>
</div>….
Comments:
–form-group: is used by Bootstrap to optimize spacing by adding a margin space around the element. It actually adds a bottom margin of 15px between the current container and it’s next sibling.
–form-control: when a control takes the form-control class, its width will be 100% of its container.
Result:
On a medium device:
![introbootstrap_scr_17]()
On a mobile screen:
![introbootstrap_scr_18]()
Tips: The Html5 placeholder attribute shows the default text when the control is empty. In our case, the input displays “email” as content. The actual value of the input is still empty, the placeholder is only for a visual information.
The best way to ensure that a page displays correctly on a specific device is to open it directly from the device’s web browser. This is not always the case due to the number of available devices and brands in the market. Web developers commonly use the browser debugger to emulate hardware devices (iphone, ipad, google nexus ,…) and all major web browsers have all this option. All mobile screenshots in this tutorial are done in this way.
Practice: Remove the form-control class and see the new behavior on desktop and mobile screen
We can also place the controls horizontally by adding the class form-inline to the form. Controls are then placed side by side till their total width doesn’t exceed the viewport width. If so Bootstrap automatically places them on a new line. According to Bootstrap official documentation, the form-inline class only applies on container being at least 768px wide.
Tips: all classes suffixed with *-inline (form-inline, checkbox-inline, radio-inline,…) always appends its elements side by side.
Code :
<div class=”form-group” class=”form-inline”>
<label for=”email”>Email address</label>
<input type=”email” id=”email” placeholder=”email”>
</div>
<div class=”form-group”>
<label for=”password”>Password</label>
<input type=”password” id=”password” placeholder=”password”>
</div>
Result on desktop screen
![introbootstrap_scr_19]()
Result on a mobile screen: since the screen’s width is lower than 768px, the form-inline effect can’t be seen on this kind of display
![introbootstrap_scr_20]()
Section 9. Using Bootstrap grid system to align form’s elements
Tips: Remember that the Bootstrap grid layout, rows and columns systems are still applicable to input, label, checkbox… actually on any html element)
In this section, we will see how to properly align the form’s controls by using the Bootstrap grid layout. Two steps are involved to make it working:
– First apply the class form-horizontal to the form element.
– Any form’s child elements having the form-group class will then act as a grid manager
– Each element inside each form-group class can finally define how many columns units will be used
Example
<form method=”post” class=”form-horizontal“>
<div class=”form-group“>
<label for=”email” class=”col-xs-4 col-md-4“>Email address</label>
<input type=”email” class=”col-xs-8 col-md-8” id=”email” placeholder=”email”>
</div>
<div class=”form-group“>
<label for=”password” class=”col-xs-4 col-md-4“>Password</label>
<input type=”password” class=”col-xs-8 col-md-8” id=”password” placeholder=”password” >
</div>
The figure below shows the form on a mobile device.
![introbootstrap_scr_21]()
Comments:
On an extra small device, each label will use 4 columns units against 8 columns units for the input type.
The Register.cshtml final code is updated as below:
<form method=”post” class=”form-horizontal“>
<div class=”form-group“>
<label for=”email” class=”col-xs-4 col-md-4 “>Email address</label>
<div class=”col-xs-8 col-md-8″>
<input type=”email” class=”form-control” id=”email” placeholder=”email”>
</div>
</div>
<div class=”form-group“>
<label for=”password” class=”col-xs-4 col-md-4 “>Password</label>
<div class=”col-xs-8 col-md-8″>
<input type=”password” class=”form-control” id=”password” placeholder=”password”>
</div>
</div>
<div class=”form-group“>
<label for=”confirmPassword” class=”col-xs-4 col-md-4 “>Confirm password</label>
<div class=”col-xs-8 col-md-8″>
<input type=”password” class=”form-control” id=”confirmPassword” placeholder=”retype password”>
</div>
</div>
<div class=”form-group“>
<label for=”confirmPassword” class=”col-xs-4 col-md-4 “>Gender</label>
<div class=”col-xs-8″>
<div class=”radio-inline col-xs-4″>
<input type=”radio” name=”gender” id=”radio1″ value=”M”> Male
</div>
<div class=”radio-inline col-xs-4″>
<input type=”radio” name=”gender” id=”radio2″ value=”F”> Female
</div>
</div>
</div>
<div class=”form-group“>
<label for=”alert” class=”col-xs-4 col-md-4 “>Alert by</label>
<div class=”col-xs-8″>
<div>
<input type=”checkbox” name=”alert” id=”chk1″ value=”E”> Email
</div>
<div>
<input type=”checkbox” name=”alert” id=”chk2″ value=”S”> SMS
</div>
<div>
<input type=”checkbox” name=”alert” id=”chk3″ value=”C”> Call
</div>
</div>
</div>
<div class=”form-group“>
<label for=”alert” class=”col-xs-4 col-md-4 “>Payment</label>
<div class=”col-xs-8 col-md-8″>
<select class=”form-control“>
<option></option>
<option>Paypal</option>
<option>Visa</option>
</select>
</div>
</div>
<div class=”form-group“>
<p class=”sr-only“>This part is not visible</p>
<button type=”button” class=”col-xs-offset-2 col-md-offset-2 col-xs-8 col-md-8 btn btn-success“>Submit</button>
</div>
</form>
Result on mobile device :
![introbootstrap_scr_22]()
Result on desktop version
![introbootstrap_scr_23]()
The form contains now almost usual form controls (input text, input password, input checkbox, input radio, select and button). New introduced features have been highlighted.
–radio-inline: place the radio buttons side by side
–sr-only: this class hides its content on any devices. Actually it doesn’t totally hide its content as the property “display:none” does, it just sets a small width and height (~ 1px each).
–col-xs-offset-2: the offset keyword marks a “left to right jump” of 2 columns units on extra small device. The component will be then displayed after the second column unit, the first two columns units display empty block.
–btn: is special class for button elements. We will have a closer look at the buttons in the next section.
Bootstrap also offers height sizing by using the “input-DEVICE_TYPE” css classes where DEVICE_TYPE is one the keywords lg, sm, xs, md as usual.
The figure below shows the effect of input-lg on the email input
<input type=”email” class=”form-control input-lg ” id=”email” placeholder=”email”>
![introbootstrap_scr_24]()
In the same way, we can enlarge the form-group class element by adding form-group-lg or form-group-sm to decrease the global height.
Practice: Add a textarea control to the register form in the same way as we did for an input type=text control. You can also disable the email address by using the html attribute “disabled”
Summary:
This section is very important for all the newbies on Bootstrap. Placing elements inside the page may be sometimes a nightmare. Remember that since you’re going to use Bootstrap on your project, you should take care of the display essentially on mobile devices. Any complicated forms may deteriorate the user experience so just keep your form as simple as possible.
Section 10. Button elements
Bootstrap has a large support for buttons that cannot be all seen in this introduction tutorial. We’ll only focus on major properties.
We call buttons any elements having the css class btn. They may be an <input type=”button” />, <input type=”submit” /> or just a simple <a> link. The btn class actually transforms them by modifying their borders to be a button-like object.
In the previous section we’ve introduced the button component with following code
<button type=”button” class=”col-xs-offset-2 col-md-offset-2 col-xs-8 col-md-8 btn btn-success”>Submit</button>
Available colors:
The btn-success class displays a green button. Others alternatives are:
. btn-default : bordered white
. btn-primary : blue
. btn-info : light blue
. btn-warning: orange
. btn-danger : red
. btn-link (as opposite to btn, the btn-link class removes all borders to display a link-like style): no background color applied, only the text is visible.
Tips: It is a very common use to reflect the button’s color to it’s real sense. Any delete buttons are better to be marked as btn-danger (strong red) to point out the irreversible operations.
Button sizing:
The button size can be modified with the following classes:
– btn-lg
– btn-sm
– btn-xs
Tips: You should always remember that Bootstrap operates on the css layer. Any attached javascript events will always still work after adding Bootstrap classes to the element.
Practice: We’ve rework the page Login.cshtml to have the following look on mobile device
![introbootstrap_scr_25]()
Code:
<hgroup class=”title”>
<h1>@Page.Title.</h1>
</hgroup>
<form class=”form-horizontal”>
<div class=”form-group “>
<label for=”email” class=”col-xs-4 col-md-4 “>Login</label>
<div class=”col-xs-8 col-md-8″>
<input type=”email” class=”form-control” id=”email” placeholder=”your email address”>
</div>
</div>
<div class=”form-group”>
<label for=”password” class=”col-xs-4 col-md-4 “>Password</label>
<div class=”col-xs-8 col-md-8″>
<input type=”password” class=”form-control” id=”password” placeholder=”password”>
</div>
</div>
<div class=”form-group”>
<button type=”button” class=”col-xs-12 btn btn-info “>Log in</button>
</div>
<div class=”form-group”>
<p class=”pull-right“>
<a class=”btn-sm” href=”~/Account/Register”>Don’t have a Account?</a>
</p>
<p class=”pull-right“>
<a class=”btn-sm” href=”~/Account/ForgotPassword”>Did you forget your password?</a>
</p>
<p class=”pull-right hidden-xs“>
<a class=”btn-sm” href=”#”>Link to mobile version</a>
</p>
</div>
</form>
You may have noticed that we’ve used the pull-right css class. In Bootstrap when you want to apply a float right positioning, you will use the class pull-right (pull-left to place it on the left). We also reduce the font size of the last two links by using the btn-sm class. This example shows that you can independently use the btn-sm css class without the btn class and reciprocally.
An interesting feature of Bootstrap is it’s responsive utility classes. The class hidden-xs is one of them. It tells the browser to hide the content for the targeted device – all extra-small devices in our case. You can read more about all available responsive utilities at the Bootstrap main page.
Summary:
You’ve got a very important hands on experiments on Bootstrap in this section. You have learnt how Bootstrap manages your form’s buttons and how to resize them. We’ve also introduced the responsive utility classes which is a very helpful tools to do a selective display across client’s devices.
Section 11. Managing tables and images with Bootstra
In this section, we’ll see how to add Bootstrap table classes to your existing table to give them a modern look while staying responsive. This can be done easily with the minimum of effort.
Tables
We’ll use the page About.cshtml. The content has been updated as below
<hgroup class=”title”>
<h2>Company history</h2>
</hgroup>
<table>
<thead>
<tr>
<th>Subsidiary</th>
<th>Creation date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bristol</td>
<td>1970-01-15</td>
</tr>
<tr>
<td>Norwitch</td>
<td>1972-05-06</td>
</tr>
<tr>
<td>Chicago</td>
<td>1980-10-10</td>
</tr>
<tr>
<td>New York</td>
<td>1990-12-11</td>
</tr>
<tr>
<td>London</td>
<td>1999-05-06</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
![introbootstrap_scr_26]()
We apply first the class “table” to the table: <table class=”table”>
We can add the table-responsive class to ensure the responsiveness of our table (effects are only visible on devices having width < 768px otherwise table is already responsive).
![introbootstrap_scr_27]()
![introbootstrap_scr_28]()
We can add the table-hover class to make an hover effect
We can also set a predefined status color on each row. There’s six predefined status background colors: active, success, info, danger, warning.
<hgroup class=”title”>
<h2 class=”text-primary bg-info“>Company history</h2>
</hgroup>
<table class=”table table-hover “>
<thead>
<tr>
<th>Subsidiary</th>
<th>Creation date</th>
</tr>
</thead>
<tbody>
<tr class=”success“>
<td>Bristol</td>
<td>1970-01-15</td>
</tr>
<tr class=”danger“>
<td>Norwitch</td>
<td>1972-05-06</td>
</tr>
<tr class=”info“>
<td>Chicago</td>
<td>1980-10-10</td>
</tr>
<tr class=”active“>
<td>New York</td>
<td>1990-12-11</td>
</tr>
<tr class=”warning“>
<td>London</td>
<td>1999-05-06</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
![introbootstrap_scr_29]()
We’ve also add two new classes (text-primary and bg-info), they aim to respectively manage the font and the background color.
Note: Sorting and filtering rows or columns are beyond of the scope of the Bootstrap native implementation. They require additional plugins.
For more advanced features on table, the Bootstrap’s official page is available at http://getbootstrap.com/css/#tables
Images
Boostrap can automatically scale an image to its container by adding the class img-responsive. It also ensures the responsiveness of the image. To center the image element inside it’s container we have to use the “center-block” class. There’s nothing more to say about images. However the future Bootstrap 4 will bring new features to do more with images.
Section 12: Bootstrap and javascrip
At the beginning of this tutorial, we’ve included the Bootstrap javascript file named “bootstrap.min.js”.
This file actually contains all natives Bootstrap’s plugins, they are transition.js, modal.js, dropdown.js, scrollspy.js, tab.js, tooltip.js, popover.js, alert.js , collaps.js, carousel.js ,affix.js. These plugins expose APIs which can be used to interact with them programatically with javascript language. All of them are based on jquery objects (remember that Bootstrap itself needs the jquery core to work). Apart from the official plugins, there’s also third-party plugins made by the community, some of them are hosted at github. Just note that Bootstrap doesn’t give any supports on them.
Tips: Before choosing a third-party library, you need to ensure that it is
– well documented
– well supported
Section 13: Customization
After you become more familiar with Bootstrap, it’s time for customization. This is the last part of the tutorial. In most of the cases, each company has it’s proper graphical charter. So there’s a little chance that you keep the default Bootstrap design layout and use your own instead. Bootstrap is fortunately very flexible and allows you to override existing classes.
As illustration, we’ve put a reference link to the css Site.css in the _SiteLayout.cshtml
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” />
<link rel=”stylesheet” href=”~/Content/Site.css” />
Tips: You should never modify the original Bootstrap files. You also need to place your css files after the Bootstrap link otherwise your modification may not carried out properly.
For the sake of simplicity, the Site.css contains the code below:
body {
font-family:’Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
.form-group {
margin-right: -30px!important;
margin-left: -30px!important;
padding-left:30px;
padding-right:30px;
}
We’ve redefined the global font family in the page. We’ve also modified some existing properties on the Bootstrap “form-group” css class and have added two new properties padding-left and padding-right.
We’ve used the css keyword !important to force the use of those properties if they’ve already been defined somewhere else before.
The new register page is shown below. Our new style is now applied to the page.
![introbootstrap_scr_30]()
Note: After you’ve redefined any Bootstrap css styles, you should always check that your website remains responsive. One common mistake is to set a high pixel value width on a div and scroll bars begins to appear on the screen.
What’s next
You’ve seen along this tutorial how to transform quickly your old website into a modern and responsive one by using Bootstrap. It is a very flexible framework. If you want to get full details about Bootstrap, the official Bootstrap website is definitely the way you have to go (http://getbootstrap.com/).
You can also have a look at some existing themes (http://themes.getbootstrap.com/collections/all) to be better inspired.
Bootstrap 4 is now under alpha version (https://v4-alpha.getbootstrap.com/) and looks very promising in terms of new features.
The post Introduction to Bootstrap appeared first on ByteScout.
![]()
ByteScout updated Spreadsheet SDK 2.70.1553 on August 15, 2016.
ByteScout updated software on August 19, 2016:
