Bootstrap 3 – Using the Base CSS

Applying consistent styling to HTML elements such as headings, paragraphs, tables, and forms is generally easy but a time-consuming process. In addition to including Normalize.css (http://necolas.github.io/normalize.css/) to render HTML elements consistently across browsers and in line with modern web standards, Bootstrap provides default styling for typography, code, tables, forms, buttons, and image elements.

In this chapter, we will see how to use the Bootstrap Base CSS in your HTML pages and how to customize it.

We will cover the following in this chapter:

  • Implementing the Bootstrap Base CSS
  • Customizing the Bootstrap Base CSS using LESS variables

If you want to use the Bootstrap Base CSS as it is, with no customization, you can simply include the Bootstrap CSS in your HTML files using the link tag:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

Implementing the Bootstrap Base CSS

In this section, we will take a look at the default styles used in the Bootstrap Base CSS listed as follows:

  • Headings
  • Body copy
  • Inline elements
  • Alignment classes
  • Addresses
  • Blockquotes
  • Lists
  • Tables
  • Buttons
  • Forms
  • Code
  • Images
  • Font styles

Instead of wandering through loads of theory, you will learn the Base CSS practically by using numerous code examples.

Headings

Bootstrap headings include sizes that are multiples of the default ones:

  • Heading level 1 <h1>: It has a default font size of 38 px, which is approximately 2.70 times the default base font size of 14 px
  • Heading level 2 <h2>: It has a default font size of 32 px, which is approximately 2.25 times the default base font size of 14 px
  • Heading level 3 <h3>: It has a default font size of 24 px, which is approximately 1.70 times the default base font size of 14 px
  • Heading level 4 <h4>: It has a default font size of 18 px, which is approximately 1.25 times the default base font size of 14 px
  • Heading level 5 <h5>: It has the same font size (14 px) as the default base font size
  • Heading level 6 <h6>: It has a default font size of 12 px, which is approximately 0.85 times the default base font size of 14 px

Tip

In almost all the code examples, we have used the padding style between the <style> tags in the <head> section to improve the aesthetics. The padding style helps you to observe the output better, as it is not close to the left side of the screen.

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

<!DOCTYPE html>
<html>
<head>
  <title> Headings in Bootstrap CSS </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packtpub
      {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-right: 50px;
        padding-left: 50px;
      }
  </style>
</head>
<body >
  <h1> Packt: Always finding a way </h1>
  <h2> Packt: Always finding a way </h2>
  <h3> Packt: Always finding a way </h3>
  <h4> Packt: Always finding a way </h4>
  <h5> Packt: Always finding a way </h5>
  <h6> Packt: Always finding a way </h6>
</body>
</html>

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

After observing the code and the preceding screenshot, you can explicitly see the implementation of the headings and the size of the font. In addition to this, the classes from h1 to h6 can be used to match the font styling of a heading and help you to display your text inline.

Take a look at the following code snippet to see how it works:

<body >
  <div class="h1">h1. Packt: Always finding a way </div>
  <div class="h2">h2. Packt: Always finding a way </div>
  <div class="h3">h3. Packt: Always finding a way </div>
  <div class="h4">h4. Packt: Always finding a way </div>
  <div class="h5">h5. Packt: Always finding a way </div>
  <div >h6. Packt: Always finding a way </div>
</body>

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

You can also add texts with smaller font sizes within headings using the <small> tag. The font sizes of the <small> tag in headings are as follows:

  • Small text in <h1>: The default font size is 24 px, which is approximately 1.70 times the default base font size of 14 px
  • Small text in <h2>: The default font size is 18 px, which is approximately 1.25 times the default base font size of 14 px
  • Small text in <h3>: The default font size is 14 px, which is the same as the base font size
  • Small text in <h4>: The default font size is also 14 px

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

<!DOCTYPE html>
<html>
<head>
  <title> Headings in Bootstrap CSS </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packtpub {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <h1> Packt: <small> Always finding a way </small></h1>
  <h2> Packt: <small> Always finding a way </small></h2>
  <h3> Packt: <small> Always finding a way </small></h3>
  <h4> Packt: <small> Always finding a way </small></h4>
  <h5> Packt: <small> Always finding a way </small></h5>
  <h6> Packt: <small> Always finding a way </small></h6>
</body>
</html>

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

As you can see, the text defined within the <small> tag is lighter and smaller than the actual heading style.

Body copy

Bootstrap defines a lead paragraph as a paragraph that stands out from others. It does so by increasing its bottom margin and font size and decreasing its font weight and line height.

The bottom margin of a lead paragraph is 2 times the bottom margin of a normal paragraph. Its font size is 1.5 times the font size of a normal paragraph, thus 1.5 times the base font size.

The value of the font weight of a lead paragraph is 200 and the value of the line height is 1.4.

To create a lead paragraph, add the lead class to any paragraph.

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

<!DOCTYPE html>
<html>
<head>
  <title> The lead class </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
  <p> Packt has a dedicated customer service department to respond to your questions. </p>
  <br>
  <p >
  Packt's mission is to help the world put software to work in new ways
  </p>
</html>

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

Typographic elements

Bootstrap provides consistent styling across browsers for common typographic elements. You can use them to semantically enhance your website copy. These HTML elements are emphasis inline elements, alignment and emphasis classes, abbreviations, addresses, blockquotes, and lists.

Emphasis inline elements

Bootstrap has default styling for the following emphasis elements:

  • <strong>: The font weight of any text between the HTML <strong> tags is set to bold. This element can be used to give some text more importance in the surrounding paragraph. The <strong> element should not be confounded with the <b> element, which doesn’t have any semantic meaning.
  • <em>: The HTML <em> element is used to add stress emphasis to a body of text. Bootstrap sets its font style to italic. The <em> element should not be confounded with the HTML <i> element, which doesn’t have any semantic meaning.
  • <mark>: The <mark> element is used to highlight text that is used for reference purposes due to its relevance in another context.
  • <u>: The <u> tag is used to underline text. It can be used to emphasize important terms or for labeling the text which is of significance.
  • <del>: The <del> tag is used to indicate blocks of text that have been deleted from a document. It is rendered through strike-through text.

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

<!DOCTYPE html>
<html>
<head>
  <title>Emphasis elements</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      
	  padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <p>
    <u> Packt Publishing </u><br>
    Founded in 2004 in <strong> Birmingham, UK </strong>, Packt's mission is to help the world put software to work in new ways.
  </p>
  <p> Packt achieves it due to the <mark> delivery of effective learning and information services </mark>to IT professionals. </p>
  <p> Working towards that vision, <del>we have published over 2000 books and videos </del> so far. </p>
  <p>We have also awarded over $1,000,000 through our <em> Open Source Project Royalty scheme. </em></p>
</body>
</html>

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

As you can see from the output, the emphasis elements help you to implement inline styles to make relevant text stand out significantly.

Alignment classes

Bootstrap has three CSS classes to align text to the left, right, or center of its parent block element. These CSS classes are:

  • text-left: As the name indicates, this CSS class aligns the text to the left of its parent block element. It’s the same as applying the text-align CSS property with the value left to the element.
  • text-right: This aligns the text to the right of the parent block element. It provides the same result as applying the text-align CSS property with the value right to the element.
  • text-center: This aligns the text horizontally at the center of its parent block element. This provides the same result as applying the text-align CSS property with the value center to the element.

    In addition to these three classes, we also have the text-justify class.

  • text-justify: This stretches the lines so that each line has equal width similar to the justification of text in newspapers or a Word document.

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

<!DOCTYPE html>
<html>
<head>
  <title>Alignment Classes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
   }
  </style>
</head>

<div >
  <p class="text-left">Packt Publishing</p>
  <p class="text-center">Packt: Always finding a way</p>
  <p class="text-right"> Packt Online library</p>
  <p > Founded in 2004 in Birmingham, UK, Packt's mission is to help the world put software to work in new ways, through the delivery of effective learning and information services to IT professionals.</p>
</div>
</html>

The output of this code upon execution will be:

As you can see from the output, the alignment of the text was as it was defined in the preceding code.

Emphasis classes

Bootstrap provides CSS classes that change the color of text to indicate a special meaning. These classes are:

  • text-muted: This changes the color of the text to a light gray shade set by the @gray-light LESS variable. It can be used to diminish the importance of a text.
  • text-warning: This changes the color of the text to the orange shade set by the @state-warning-text LESS variable. It can be used to indicate warning or something that is going to have incorrect consequences.
  • text-danger: This changes the color of the text to the red shade set by the @state-danger-text LESS variable. It can be used to indicate a dangerous action, a problem, or an error that can be crucial.
  • text-success: This changes the color of the text to the green shade set by the @state-success-text LESS variable. It can be used to indicate success after an action such as a form submission.
  • text-info: This changes the color of the text to the blue shade set by the @state-info-text LESS variable. It can be used to indicate general information that can be quite handy.
  • text-primary: This changes the color of the text to a sky blue shade. It is usually used to indicate text that is relevant based on priority.

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

<!DOCTYPE html>
<html>
<head>
  <title>Emphasis Classes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>

</head>
<body id ="packt">
  <p class="text-muted"> Bootstrap 2 is outdated </p>
  <p class="text-primary"> Bootstrap 3 is the present version</p>
  <p class="text-success"> Bootstrap is an awesome toolkit for web design </p>
  <p class="text-info"> Bootstrap 4 is expected to be among the forthcoming releases </p>
  <p class="text-warning">Don't mess with me </p>
  <p > Step with caution </p>
</body>
</html>

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

Similar to contextual colors for text, you can also use colors to set the background of an element using the following classes:

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

Suppose we remove the contextual colors for text and replace it with contextual background colors, we will see the following output (refer to the code bundle for the entire code):

Addresses

Addresses should be depicted using the HTML element address. According to the HTML specification, the address element should be used for contact information related to the nearest article or body element. Arbitrary addresses not related to contact information should be displayed using the HTML element p instead of the element address.

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

<!DOCTYPE html>
<html>
<head>
  <title>Address</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">

  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>

</head>
<body>
  <address >
    <strong> Packt Publishing Limited. </strong><br>
    Livery Place, 35 Livery Street,<br>
    Birmingham, West Midlands, B3 2PB<br>
    <a href="mailto:contact@packtpub.com"> Contact us </a>
  </address>
</body>
</html>

The output of this code will be as follows:

As you can see from the output, the address for Packt Publishing Limited is defined within the <address> HTML tag in Bootstrap.

Blockquotes

Blockquotes are used to indicate the enclosed text that originates from another source. They are displayed by placing an HTML paragraph element p between a blockquote element.

Bootstrap adds a large border of 5 pixels to the left of blockquotes as shown in the screenshot following the code. The color of the border is a light gray set by the @gray-lighter LESS variable.

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

<!DOCTYPE html>
<html>
<head>
  <title>Blockquotes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
  <blockquote>
    <p>
    If you are a CakePHP developer looking to ease the burden of development, then this book is for you.
    </p>
    <small>CakePHP 2 Application Cookbook <cite title="Source Title">by James Watts, Jorge González</cite></small>
  </blockquote>
</html>

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

If you look at the output and the preceding code, you will observe that the source of the quote is defined between the <small> tags and the name of the source is defined within the <cite> tags.

If you need right-aligned content, then you can also use the blockquote-reverse class.

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

<!DOCTYPE html>
<html>
<head>
  <title>Blockquote Reverse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">

</head>
<blockquote >
  <p>If you are a CakePHP developer looking to ease the burden of development, then this book is for you.</p>
  <small>CakePHP 2 Application Cookbook <cite title="Source Title">by James Watts, Jorge González</cite></small>
</blockquote>
</html>

The output of the code on execution will be as follows:

From the preceding output, you can clearly see that the blockquote text content is aligned to the right.

Abbreviations

Abbreviations should be displayed using the HTML element abbr. Bootstrap adds a light gray, dotted border at the bottom of abbreviations with a title attribute. It also adds a help cursor that appears on hovering over abbreviations.

Bootstrap also provides the initialism CSS class, which decreases the font size of the abbreviation to 90 percent of the parent font size and transforms its letters to uppercase.

If an abbreviation doesn’t have a title attribute or a initialism class added, Bootstrap won’t apply any style to it.

The following code contains two abbreviations. The second one has the initialism CSS class added:

<!DOCTYPE html>
<html>
<head>
  <title> Bootstrap Abbreviations </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
  <p>An abbreviation of the expression Hypertext Markup Language is <abbr title="Hypertext Markup Language" >html</abbr>.</p>
</body>
</html>

The output of this code will be as follows:

If you hover over HTML, you can see the following screen:

As you can see from the output, on hovering, you can see the complete expression that HTML stands for as defined in the code.

Lists

Bootstrap harmonizes the margins and paddings of unordered, ordered, and description lists. It also provides CSS classes that can be used to remove the default styling of lists or display list items inline.

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

<!DOCTYPE html>
<html>
<head>
  <title>Ordered and Unordered Lists </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <h1> Packt Publishing </h1>
  <ul>
    <li> Packt Categories </li>
    <li> Packt Subscription Services </li>
    <ul>
      <li> Mobile Browser App </li>
      <li> PacktLib: Online Library </li>
    </ul>
    <li> News Center</li>
    <li>Packt Blog</li>
  </ul>
  <h1> Reader's space </h1>
  <ol>
    <li> Packt Tech Hub </li>
    <li> Article Network </li>
    <li> Support </li>
    <li> About us </li>
  </ol>
</body>
</html>

The output of this code will be as follows:

While unordered lists are those in which the order doesn’t matter, ordered lists are those where the hierarchy is maintained as defined. While unordered lists are defined by the <ul> tags, ordered lists are defined by the <ol> tags. Also, from the preceding code and the output, you can see that we have nested unordered lists within the main unordered lists resulting in the Mobile Browser App and PacktLib: Online Library text nested under the main lists.

You can also use unstyled lists if you need to.

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

<!DOCTYPE html>
<html>
<head>
  <title>Ordered and Unordered Lists </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <h1> Packt Publishing </h1>
  <ul class="list-unstyled">
    <li> About us </li>
    <li> Packt Categories </li>
    <li> Packt Subscription Services </li>
    <ul>
      <li> Mobile Browser App </li>
      <li> PacktLib: Online Library </li>
    </ul>
    <li> News Center</li>
    <li>Packt Blog</li>
  </ul>

  <h1> Reader's space </h1>
  <ol>
    <li> Packt Categories </li>
    <ol >
      <li> Web development </li>
      <li> Application development </li>
      <li> Big Data </li>
      <li> Networking and Servers </li>
      <li> Virtualization and cloud </li>
    </ol>
    <li> Packt Tech Hub </li>
    <li> Article Network </li>
    <li> Support </li>
  </ol>
</body>
</html>

The output of the code on execution will be as follows:

If you observe the output, you can see that in the unordered lists, the main list comprising About us, Packt Categories, Packt Subscription Services, News Center, and Packt Blog do not have any styles applied resulting in no bullet points. However, the nested text list Mobile Browser App and PacktLib: Online Library have bullet points meaning that you need to add the list-unstyled class to nested elements too explicitly. Under Reader’s space, we can see that the nested ordered lists under Packt Categories have an unstyled list without any bullets as we have defined the list-unstyled class for the nested elements.

You can also list items on a single line by using the list-inline class.

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

<body>
  <ul  >
    <li> Web development </li>
    <li> Application Development </li>
    <li> Big Data and Business Intelligence </li>
    <li> Virtualization and Cloud </li>
    <li> Networking and Servers </li>
  </ul>
</body>

The output of the code on execution will be as follows:

As you can see, the list items have been displayed inline as defined.

Tables

Bootstrap provides an efficient layout to build elegant tables, which you will learn about in the following section.

Basic styling

To use the basic table styling provided by Bootstrap, you need to add the table CSS class to the HTML table tags in your code.

Take a look at the following code example:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Tables</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>

</head>
<body >
  <table >
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aravind </td>
        <td>Shenoy</td>
        <td>Technical Content Writer</td>
      </tr>
      <tr>
        <td>Jim</td>
        <td>Morrison</td>
        <td>Awesome Vocalist</td>
      </tr>
      <tr>
        <td>Jimi</td>
        <td>Hendrix</td>
        <td> Amazing Guitarist</td>
      </tr>

    </tbody>
  </table>
</body>
</html>

The output of the code will be as follows:

You can set the background color of the tables by changing the value of the @table-bg LESS variable. Its default value is transparent. You can also use the CSS classes, table-bordered and table-striped, to implement borders and zebra striping to the tables.

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

<body >
    <table >
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Aravind </td>
          <td>Shenoy</td>
          <td>Technical Content Writer</td>
        </tr>
        <tr>
          <td>Jim</td>
          <td>Morrison</td>
          <td>Awesome vocalist</td>
        </tr>
        <tr>
          <td>Jimi</td>
          <td>Hendrix</td>
          <td> Amazing Guitarist</td>
        </tr>

      </tbody>
    </table>
</body>

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

From the preceding code and its output, you can see that the borders and stripes are applied to the table. The color of the stripes is set with the built-in LESS variable @table-bg-accent. Its default value is #f9f9f9. The color of the borders is set with the built-in LESS variable @table-border-color. To enable a hover state on table rows, add the class table-hover to your tables. The background color of the row on hover is set by the built-in LESS variable @table-bg-hover. To make your tables more compact, you can use the table-condensed class.

You can also add contextual colors to the tables or even individual cells by using classes such as success, warning, danger, info, and active; for example, let’s define the contextual classes to the table rows as shown in the following code snippet:

<body >
    <table class="table ">
      <thead >
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Role</th>
        </tr>
      </thead>
      <tbody>
        <tr class="success">
          <td>Aravind </td>
          <td>Shenoy</td>
          <td>Technical Content Writer</td>
        </tr>
        <tr class ="info">
          <td>Jim</td>
          <td>Morrison</td>
          <td>Awesome Vocalist</td>
        </tr>
        <tr >
          <td>Jimi</td>
          <td>Hendrix</td>
          <td> Amazing Guitarist</td>
        </tr>

      </tbody>
    </table>
</body>

The output of the code will be as follows:

Buttons

You can create buttons and define contextual colors for each of them. You can also define the size of the button. In Bootstrap, you can also define an active or disabled state for the button. You can use button classes on the <a> or <input> element though it is preferable to use the < button> element for appropriate semantics.

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

<!DOCTYPE html>
<html>
<head>
  <title>Buttons in Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >
  <h1> <u> Different kinds of buttons in Bootstrap </u1> </h1>
  <br>
    <button type="button" class="btn btn-default">Default Button</button>
  <br><br>
    <button type="button" class="btn btn-primary">Primary Button</button>
  <br><br>
    <button type="button" class="btn btn-success btn-lg">Success Button</button>
  <br><br>
    <button type="button" class="btn btn-info btn-sm">Info Button</button>
  <br><br>
    <button type="button" class="btn btn-warning btn-xs">Warning Button</button>
  <br><br>
    <button type="button" class="btn btn-danger">Danger Button</button>
  <br><br>
    <button type="button" >Link Button</button>
</body>
</html>

The output of this code will be as follows:

As you can see, the contextual colors are applied to the buttons. You can also see that Success Button, Info Button, and Warning Button are of different sizes than the others as we have defined btn-lg, btn-sm, and btn-xs for them.

Forms

Forms fields are automatically styled by Bootstrap. Forms can be defined as normal, inline, and horizontal as per the requirement.

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

<!DOCTYPE html>
<html>
<head>
  <title>Forms in Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body id="packt">
  <form role="form">
    <div class="form-group">
      <label for="enterusername"> Enter Email Address as the Username</label>
      <input type="email" class="form-control" id="enterusername" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="enterpassword">Password</label>
      <input type="password" class="form-control" id="enterpassword" placeholder="Password">
    </div>
    <br>
    <div class="form-group">
      <label for="filebrowse">Browse to find file</label>
      <input type="file" id="filebrowse">
    </div>
    <br>
    <div class="checkbox">
      <label> <input type="checkbox"> Keep me signed in </label>
    </div>
    <br>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" value="option1" id="radio1">
        Male
      </label>
    </div>

    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" value="option2" >
        Female
      </label>
    </div>
    <br>
    <button type="submit" >Login</button>
  </form>
</body>
</html>

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

As we can see in the output, you can create a form in Bootstrap. In the preceding code, we have defined the form groups and then combined the essential elements together, including defining the labels in addition to creating the radio and checkbox types.

Inline forms

Forms can also be displayed inline with the input displayed next to each other. To display the inputs inline, you need to add the form-inline class to the form and set a width value to the input box because the default width is 100 percent.

Take a look at the following code block defined in the HTML document to understand it better:

<body id="packt">
  <form role="form" class="form-inline">
    <div class="form-group">
      <label for="emailaddress" class="sr-only">Email Address</label>
      <input type="email" class="form-control" id="emailaddress" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="enterpassword" class="sr-only">Password</label>
      <input type="password" class="form-control" id="enterpassword" placeholder="Password">
    </div>
    <br><br>
    <div class="checkbox">
      <label> <input type="checkbox"> Keep me signed in </label>
    </div>
    <br><br>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" value="option1" id="radio1">
        Male
      </label>
    </div>

    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" value="option2" >
        Female
      </label>
    </div>
    <br><br>
    <p> Enter your comments in the following box </p>
    <br>
    <textarea rows="5" cols="70" placeholder="Your feedback is important to us">
    </textarea>
    <br><br>
    <button type="submit" >Login</button>
  </form>
</body>

The output of the code on execution will be as follows:

If you observe the code and the preceding output, you can see that the inline style has been applied to the form as the two textboxes for the e-mail as well as the password are on a single line. You can also see that though we have defined the label for e-mail as well as the Password fields, they are hidden due to the definition of the sr-only class.

Note

Screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the sr-only class. You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyway, therefore, you shouldn’t see a visual difference.

Horizontal forms

You can align the form labels and fields horizontally by adding the form-horizontal class to the form and using div elements with the Bootstrap Grid classes.

Take a look at the following code sample in the HTML document to understand it better:

<form class="form-horizontal" role="form">
  <div class="form-group" form-group-lg>
    <label for="Email_user" class="col-sm-2 control-label">Login</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" id="Email_user" placeholder="Email OR Username">
    </div>
  </div>
  <div class="form-group" form-group-sm>
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-4">
      <input type="password" class="form-control"  placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-4">
      <button type="submit" > Login </button>
    </div>
  </div>
</form>

The output of this code will be as follows:

As you can see, the form has a horizontal layout. You can also include block level help text by using the help-block class within the <span> element. You can also use optional icons in horizontal and inline forms using classes such as has-success and has-feedback to further enhance your forms.

Code

You can wrap inline code snippets using the <code> tag. However, for multiple blocks of code, we use the <pre> tag.

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

<!DOCTYPE html>
<html>
<head>
  <title>Using the Bootstrap Grid classes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>

</head>
<body id ="packt">
  <code>The &lt;p&gt; element</code>
  <pre>
    &lt;p class="text-left">Left aligned text.&lt;/p&gt;
    &lt;p class="text-center">Center aligned text.&lt;/p&gt;
    &lt;p >Right aligned text.&lt;/p&gt;
    &lt;p&gt; Sample text here... &lt;/p&gt;
  </pre>
</body>
</html>

The output of this code will be as follows:

You have to use &lt; and &gt; for the angular brackets in the <code> tag.

Images

In Bootstrap, the <image> element is used to embed and style images in the document. You can also use the built-in classes to style the images with a rounded corner or a thumbnail.

Images can be made responsive using the img-responsive class. By this attribute, you can apply the maximum width of 100 percent and an automatic adjustment of height to the image, enabling it to scale easily with respect to the parent element.

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

<!DOCTYPE html>
<html>
<head>
  <title>Images in Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.css" rel="stylesheet" media="screen">
  <style>
    #packt {
      padding-top: 25px;
      padding-bottom: 25px;
      padding-right: 50px;
      padding-left: 50px;
    }
  </style>
</head>
<body >

  <img src="packt_sample.png"   class="img-rounded" height="150" width="130">
  <br><br>
  <img src="packt_sample.png"   class="img-circle">
  <br><br>
  <img src="packt_sample.png"     height="75" width="75">
  </body>
</html>

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

Font families

Bootstrap includes defaults for sans-serif, serif, and monospace font families.

Sans-serif font family

The default sans-serif font family used in Bootstrap is "Helvetica Neue", Helvetica, Arial, sans-serif. It can be changed with the LESS variable @font-family-sans-serif. It is also assigned to the LESS variable @font-family-base, which sets the base font family used by default everywhere in Bootstrap.

Serif font family

The default serif font family used in Bootstrap is Georgia, "Times New Roman", Times, serif. It is set in the LESS variable @font-family-serif.

The serif font family is not used by default but you can use the LESS variable @font-family-serif or you can assign it to the LESS variable @font-family-base so that it replaces the sans-serif font everywhere.

Monospace font family

The font family used for monospace text— <code> and <pre> HTML tags—is Monaco, Menlo, Consolas, "Courier New", monospace. The corresponding LESS variable is @font-family-monospace.

Font sizes

The default font sizes of HTML elements provided by Bootstrap are consistent and can be quickly adapted to your use cases by modifying LESS variables.

Font sizes variables

Bootstrap has various LESS variables to customize the font sizes:

  • @font-size-base: This is the base font size used across Bootstrap. By default, all paragraphs use this font size. Other HTML elements such as lists and code also use it. The value of @font-size-base is 14 px by default. You can change it by adding a line like the following in your custom LESS style sheet.
  • @font-size-base: 16px: The HTML elements such as headings and blockquotes don’t use the base font size; instead they use a font size which is a multiple of the base font size. Changing the base font size will also change the font sizes of these HTML elements. This ensures consistency across your website design so that you don’t end up with elements that are not adequately proportional with each other.
  • @font-size-large: This is the font size used for large buttons and form fields, large paginations and the brand name in the navigation bar. The default value is 18 px, which is approximately 1.25 times the base font size of 14 px.
  • @font-size-small: This is the font size used for small buttons and form fields, small paginations, badges, and progress bars. The default value is 12 px, which is approximately 0.85 times the base font size of 14 px.

Font sizes for headings

Font size for headings can also be manipulated by assigning a different value to the headings using the following code in the custom LESS file. The default font sizes for the headings are as follows:

  • @font-size-h1: 36px;
  • @font-size-h2: 30px;
  • @font-size-h3: 24px;
  • @font-size-h4: 18px;
  • @font-size-h5: 14px;
  • @font-size-h6: 12px;

By altering the values in your custom LESS file, you can change the size of the variables.

Comments are closed.