Chapter 2. Using Bootstrap CSS and HTML Elements

Bootstrap provides a wide range of HTML elements and CSS classes as well as an advanced grid system to aid in laying out your web page designs. These classes and elements include utilities to assist with typography, code formatting, table, and form layouts, to name a few.

All CSS classes and HTML elements, combined with the mobile-first fluid grid system, enable developers to build intuitive web interfaces quickly and easily without having to worry about the nuts and bolts of enabling responsiveness for smaller device screens and styling user interface elements.

In this chapter, we will cover the following topics:

• The Bootstrap grid system

• Bootstrap tables and buttons

• Laying out different Bootstrap forms

• Enabling ASP.NET MVC scaffolding templates

• Using images in Bootstrap and configuring the images to be responsive

The Bootstrap grid system

In 2015 Google said "more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan". (http://adwords.blogspot.co.za/2015/05/building-for-next-moment.html) This means that chances are more people are browsing your website with a mobile device than a traditional desktop computer.

The Bootstrap grid system is mobile-first, which means it is designed to target devices with smaller displays and then grow as the display size increases. It uses a 12-column layout with different tiers for each media query range.

Bootstrap Grid components

Think of the Bootstrap grid system as similar to a traditional HTML table. It primarily consists of three components:

• Containers

• Rows

• Columns

Containers

Containers are required in order to use the Bootstrap grid system, and are used to wrap and center the page content and to specify a proper width for the layout. As the name implies, it acts as a container for the grid's rows and columns and is a...

Bootstrap HTML elements

Bootstrap provides a host of different HTML elements that are styled and ready to use. These elements include the following:

• Tables

• Buttons

• Forms

• Images

Bootstrap tables

Bootstrap provides default styling for HTML tables with a few options to customize their layouts and behaviors. The default ASP.NET MVC scaffolding automatically adds the .table class name to the table element when generating a List view.

Enabling MVC Scaffolding

In the previous chapter, we created an empty ASP.NET Core project. In order to enable the built-in Visual Studio Scaffolding and because the new ASP.NET's approach is to only add the dependencies you need, we have to manually add the required dependencies to the project by completing the following tasks:

1. Open the project you created in Chapter 1, Getting Started with ASP.NET Core and Bootstrap 4, in Visual Studio.

2. Locate the project.json file in the project's root folder and double-click it to edit.

3. Add or update the following dependencies to the dependencies...

Form layout and elements

Forms make up a large section of most line-of-business applications, and therefore, applying a uniform style to all forms in your web application is not only visually pleasing but also provides your users with a friendlier interface. Bootstrap provides a range of CSS styles to enable you to create visually appealing forms.

Vertical/basic forms

The basic form in Bootstrap always displays its contents in a vertical manner, which means that labels for form <input> elements are displayed above them. With Bootstrap 4, the <fieldset> elements do not have any borders, padding, or margins, and they can be used to wrap inputs into groups by setting the <fieldset> element's class to .form-group. Form elements can also be grouped by placing them inside a <div> element with a class of .form-group.

In the HTML markup that follows, a HTML form will be created using the new ASP.NET Core Tag Helpers containing two Bootstrap form input elements and a submit button...

Bootstrap images

Images can be made responsive by setting their class attribute to .img-fluid. This will scale the image in relation to its parent element by setting its maximum width to 100% and height to auto.

You also have the option to shape images with either rounded corners, circles, or with an outer border. This is accomplished by setting the <img> element's class to one of the following Bootstrap classes:

• img-rounded

• img-circle

• img-thumbnail

In the following image, we've displayed a list of employees, and their pictures. The list of employees could be retrieved from a database and passed to the view:

The code that achieves the preceding result, which can be viewed in the accompanying sample project for this chapter, is as follows:

@model IEnumerable<Chapter2.Models.EmployeeViewModel> 
<div class="container"> 
    <h2>Employees</h2> 
 
    <div class="row"> 
        @foreach (var item in Model) 
        { 
          ...

Bootstrap figures

If you need to display an image or a piece of content with a caption, the <figure> element can be used. The <figure> element is part of the HTML5 spec and is not specific to Bootstrap 4. Bootstrap 4 does, however, provide some helper classes to style the <figure> element appropriately.

For example, the following HTML markup will create a <figure> element containing an image and a caption:

<div class="row"> 
    <div class="col-md-12"> 
        <figure class="figure"> 
            <img src="@Url.Content("~/img/bulb.png")" class="figure-img 
             img-fluid img-rounded" alt="Light bulb"> 
            <figcaption class="figure-caption"> 
                This is a public domain image, available from 
            <code>http://publicdomainarchive.com</code> 
            </figcaption> 
        </figure> 
    </div> 
</div> 
...

Summary

In this chapter, you've explored how to lay out various elements using the Bootstrap grid and form classes. You've also seen how to enable MVC scaffolding and how to incorporate responsive Bootstrap images and figures in our project.

In the next chapter, you'll discover the various Bootstrap components, including the Bootstrap navigation bar, input groups, progress bars, and alerts, and how to implement them in your ASP.NET MVC project.