Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article


Get GitHub Code

Among the most important recent shifts in technology is the need to publish your app across multiple platforms and viewports. This is nowhere more important that the web space where your website may be viewed from devices as wide-ranging as a phone to a big-screen television. Getting presentable results on these widely different viewports is a challenge that culminated in a movement called “Responsive Design,” where your website is expected to detect – and respond accordingly to – the size of the end-users screen.

Step 1: Understanding Responsive Design

This task is performed by using “media queries” in CSS files that load up different styling rules depending on the end-users viewport. As with many technologies, you can do this all from scratch or you can employ some form of pre-built Framework that you can tap into and include in your project as an external library. Perhaps the most popular Framework for meeting the challenge of responsive design is Bootstrap, which was developed and made freely available, by Twitter.

Step 2: Install the Bootstrap Package

For this lesson, create a new ASP.NET project called “BootstrapExample," adding to it a Default.aspx page. Referring to the NuGet Package installation steps outlined in Lesson 66, install Bootstrap and update its dependencies (JQuery):


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.001


Step 3: Reference Bootstrap CSS in HTML of Default.aspx

Reference the minified version of Bootstrap by dragging and dropping from the Solution Explorer, directly into the <head> section of the Default.aspx file:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.002


Tip:

“Minified” versions for some file types of interpreted code and markup languages (such as JavaScript or CSS) are compressed versions of the original files. Most of the compression is achieved by eliminating whitespace and changing variable names to shorter character lengths. For this reason, minified versions are great for deployment in final builds while the more human readable, non-minified versions are best used in production – where you, the developer, may want to look up particular code elements.

Step 4: Add Necessary JQuery and Javascript HTML References

Also add references to the following Javascript files found in the “Scripts” folder by adding them just before the closing </body> tag:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.005


Step 5: Add a Bootstrap Class Attribute to the Outermost Div

We will be working mostly within the Default.aspx file to reference various Bootstrap classes in order to apply those styling rules to our web page. The first thing we will want to do is add a class attribute to the main <div> tag:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.006


Step 6: Understanding Div Tags, CSS Classes and Intellisense

A div tag is a common HTML element that represents a “division” in the page. The best way to think of these page divisions is like “boxes” in your web page that hold – and keep separate – different parts of your page. The name “container” refers to the styling rule created for this page element in the Bootstrap Framework, and you may have noticed that Intellisense gave you a large list of available CSS classes imported from the Bootstrap Framework. This “container” div is meant to hold all other divs and HTML elements, so, let’s create a header and paragraph nested within that tag:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.007


Step 7: Specify Column Division with Bootstrap ‘col’ Classes

Right before the closing </div> tag for the container, create another div (representing a row) that contains two more divs (representing columns in that row):


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.008


Tip:

Developers love to use Latin language as “dummy” or placeholder text. It’s colloquially referred to as “Lorem Ipsum” text, but you can use whatever placeholder text you want. Just be sure to use enough to gauge how actual text will flow in your final document.


Bootstrap uses a grid-like column layout to deal with page separation – particularly when working with page-widths. The grid can be thought of as dividing the entire page-width evenly across twelve invisible columns. In the above example, two divs with six columns in each div amounts to twelve columns total, resulting in an even split of page-width between each div. This becomes clear upon running the application:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.010


One of the most interesting features of this grid-like behavior is how it automatically rearranges and adapts to different viewports. You can simulate this by reducing the browser window manually. Here we see the columns rearrange to stacking on top of one another in smaller viewports:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.011


Step 8: Understanding Bootstraps ‘col’ Classes

Bootstrap has classes for handling column widths based on four tiers of possible viewport sizes:

  • Col-xs-(number) – Phones

  • Col-sm-(number) – Tablets

  • Col-md-(number) – Desktops

  • Col-lg-(number) – Large Desktops and TVs

When you apply a smaller tier column width classes, that styling gets automatically applied to larger tiers unless "overridden" by adding it to the class attribute. Below we’re applying an even column width split at the lowest tier, which would be retained (and resized) with larger viewports as well:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.012


Step 9: Override Automatically Inherited Grid Rules

Now, let’s override the even split (6:6) being inherited at the Desktop tier by specifying a (4:8) split at that viewport size. This is placed inside the same div tag, right after the xs specification:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.013


When you run the application, you will see that the even (6:6) split is retained at the Phone tier, up to the Mobile tier:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.014


But at the Desktop tier, and larger, it applies the uneven (4:8) split instead:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.015


You can override at every viewport size, defining column split behavior at each tier. And as you run the a pplication and resize the browser window you should get a good idea for how the overrides kick in at each tier:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.016


It's worth noting that the order in which you specify the column division does not matter to the compiler. If you wanted to, you could start with col-md, then col-sm, col-xs and so on. However, for the sake of human readability, you may want to put them in a logical order.

Step 10: Understanding Media Queries and Viewport Width

The cutoff point for viewport widths from iPhones, up to large TVs, is defined in Bootstrap’s CSS with “media queries”. This media query holds CSS styling rules for everything at the Tablet tier and higher:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.017


Step 11: Using Bootstrap to Style Forms

Next we’re going to apply Bootstrap formatting to a form, which is of particular importance for what we're going to do in an upcoming project. We’re going use a built-in CSS class called “form-group,” which will contain a label, and then the actual HTML Control itself.


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.018


Note that the ASP-specific markup will get rendered to specific HTML on the server side when the application runs. The resulting HTML will look like this when loaded in the browser (notice, in particular, how the ASP attribute for “CssClass” gets rendered to an HTML “class”:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.019


Step 12: Add More Form Elements

Next, we’ll add to the form another form-group containing a dropdown selection list:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.020


And then directly below that </div> insert a CheckBox and two Radio buttons.:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.021


Notice that these controls don't follow the same pattern of the form-group we've been using, rather using a div class of radio or checkbox. This is primarily because the label is typically on the right-hand side of these controls, requiring us to specify that location. Any text for the label will come after the closing tag for the control, but before the closing tag for the label.

Step 13: Experiment with Classes

And, finally, insert below the last Radio’s </div> a Button Control. Experiment with the Intellisense options for the “CssClass” attribute, applying different styling rules to the Button Control:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.022


When you run the application, you will notice that the form has some nice default styling when compared to the un-styled output we saw in earlier lessons:


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.023


If your HTML doesn’t look right, it might be because you didn’t structure the divs correctly. Here is the structure of the entire for form and “container” div (with the nested divs rolled-up):


cs-asp-068---introduction-to-the-twitter-bootstrap-css-framework.024


For specific documentation on Bootstrap CSS, visit the following URL:

http://getbootstrap.com/css/


Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Comments

Please login or register to add a comment