Base CSS and Navigation Systems in Bootstrap

  •  3 Comments

In the last article we discussed Bootstrap CSS grids and elements. For the second part of our tutorial, we’re going to study the different base elements and navigation system.

Using the Base CSS

Styling HTML elements — which includes headings, paragraphs, forms and tables — is easy but can take some time in the process of web development. Here, we’ll walk though how to use Bootstrap Base CSS in your HTML pages and how to customize it.

Headings

Just like normal HTML, Bootstrap comes with headings of different default sizes. Let’s check out the sizes.

  • Heading level 1 <h1> – comes with 38px font size (2.70 X the default base font size of 14 px)
  • Heading level 2 <h2> – comes with 32px font size (2.25 X the default base font size of 14 px)
  • Heading level 3 <h3> – comes with 24px font size (1.70 X the default base font size of 14 px)
  • Heading level 4 <h4> – comes with 18px font size (1.25 X the default base font size of 14 px)
  • Heading level 5 <h5> – comes with 14px font size (same as the base font size of 14px)
  • Heading level 6 <h6> – comes with 12px font size (0.85 X the default base font size of 14 px)

Take a look at the code below and see how the default sizes look.

&lt;h1&gt;This is H1&lt;/h1&gt;
&lt;h2&gt;This is H2&lt;/h2&gt;
&lt;h3&gt;This is H3&lt;/h3&gt;
&lt;h4&gt;This is H4&lt;/h4&gt;
&lt;h5&gt;This is H5&lt;/h5&gt;
&lt;h6&gt;This is H6&lt;/h6&gt;

See the output below:

Header

Small Element

The small element is also called “small print,” which is mostly used for legal disclaimers. Let’s see this in action.

&lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-lg-4 callout&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-phone&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                    &lt;h2&gt;Mobile First&lt;/h2&gt;
                    &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. &lt;/small&gt; &lt;/p&gt;
                &lt;/div&gt;&lt;!-- col-lg-4 --&gt;
                &lt;div class=&quot;col-lg-4 callout&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-ok&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                    &lt;h2&gt;Pixel Perfect&lt;/h2&gt;
                    &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. &lt;/small&gt;&lt;/p&gt;
                &lt;/div&gt;&lt;!-- col-lg-4 --&gt;    
                &lt;div class=&quot;col-lg-4 callout&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-pencil&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                    &lt;h2&gt;Editable&lt;/h2&gt;
                    &lt;p&gt;&lt;small&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. &lt;/small&gt; &lt;/p&gt;
                &lt;/div&gt;&lt;!-- col-lg-4 --&gt;    
&lt;/div&gt;&lt;!-- row --&gt;

As you can see, the small element was used inside a paragraph tag so it will inherit the size of 12px by default.

Glypychon

You can also use the small text inside of the headings which will have the following sizes:

  • Small Text heading level 1 <h1> – comes with 24px font size
  • Small Text heading level 2 <h2> – comes with 18px font size
  • Small Text heading level 3 <h3> – comes with 14px font size
  • Small Text heading level 4 <h4> – comes with default 14 base font size

Block Quote

A block quote tag usually emphasizes quoted text from an outside source. By default bootstrap uses a 5 pixel border on the left size of the quote to specify a block quote. See the sample code below.

&lt;blockquote&gt;
&lt;p&gt;
Great minds discuss ideas; average minds discuss events; small minds discuss people.
&lt;/p&gt;
&lt;small&gt;Eleanor Roosevelt &lt;cite title=&quot;Source
Title&quot;&gt;Ideas, Minds and Average&lt;/cite&gt;&lt;/small&gt;
&lt;/blockquote&gt;

Take a look on the output of the code.

Blockquote

Addresses

Addresses are represented with the HTML element address. Bootstrap comes with this type of element with just a simple design. See code and output below.

&lt;address id=&quot;contact&quot;&gt;
    &lt;h3&gt;Reach to Us&lt;/h3&gt;
    &lt;p&gt;&lt;span class=&quot;glyphicon glyphicon-home&quot;&gt;&lt;/span&gt; #123 St. Kansas City, MO&lt;br/&gt;
    &lt;span class=&quot;glyphicon glyphicon-phone&quot;&gt;&lt;/span&gt; +34 1234 5678 &lt;br/&gt;
    &lt;span class=&quot;glyphicon glyphicon-folder-open&quot;&gt;&lt;/span&gt;  &lt;a href=&quot;#&quot;&gt;  name@email.com&lt;/a&gt; &lt;br/&gt;
    &lt;/p&gt;
&lt;/address&gt;

The output of the code is:

Address

Code Element

The code element usually indicates the fragment of computer code which contains HTML or other programming languages. Usually Bootstrap wraps inline code snippets with the <code> tag along with <pre> tag. To escape coding characters you need to use &lt; and &gt; for the angular brackets in the <code> tag. See the example below.

&lt;code&gt;The &amp;lt;code&amp;gt; element&lt;/code&gt;
                 &lt;pre&gt;
                 &amp;lt;p class=&quot;text-left&quot;&gt;We have a text align left here.&amp;lt;/p&amp;gt;
                 &amp;lt;strong&gt;We have a bold text here.&amp;lt;/strong&amp;gt;
                 &amp;lt;p class=&quot;text-right&quot;&gt;We have a text align right here.&amp;lt;/p&amp;gt;
                 &lt;/pre&gt;

Using the above code, you’ll get a result similar to this:

Code

Alignment Classes

Bootstrap comes with three CSS classes that align text from left to right. The classes include:

  • text-left – aligns text to the left
  • text-right – aligns text to the right
  • text-center – aligns text to the center
  • text-justify – stretches the lines to have an equal width in the container element

Emphasis Classes

Aside from alignment classes, bootstrap also provides emphasis classes that change the color of the text varying from the mood of the class. Check out the following classes:

  • text-warning – change the color of the text orange
  • text-muted – change the color of the text to light gray
  • text-success – change the color of the text to green
  • text-danger – change the color of the text to red
  • text-info – change the color of the text to blue
  • text-primary – change the color of the text to sky blue

Let’s see this in action.

 &lt;p class=&quot;text-muted&quot;&gt; This is muted &lt;/p&gt;
 &lt;p class=&quot;text-primary&quot;&gt; This is primary &lt;/p&gt;
 &lt;p class=&quot;text-success&quot;&gt; This is success &lt;/p&gt;
 &lt;p class=&quot;text-info&quot;&gt; This is info &lt;/p&gt;
 &lt;p class=&quot;text-warning&quot;&gt; This is warning &lt;/p&gt;
 &lt;p class=&quot;text-danger&quot;&gt; This is danger &lt;/p&gt;

With the code above you’ll get these results:

Emphasis class

Forms

Forms in Bootstrap have a defined style. They can be in normal, horizontal or inline style. Let’s take a look.

Default Forms

Check out the code below to see how a normal form in bootstrap works.

&lt;form&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Your Email..&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
    &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; placeholder=&quot;Your Password..&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;file-upload&quot;&gt;Browse File&lt;/label&gt;
    &lt;input type=&quot;file&quot; id=&quot;file-upload&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;checkbox&quot;&gt;
    &lt;label&gt;
      &lt;input type=&quot;checkbox&quot;&gt; This is a checkbox
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Log-in!&lt;/button&gt;
&lt;/form&gt;

The output of the code will look like the image below.

Forms

As you can see, forms in bootstrap have a generic style from the elements group within a class of form-group for proper spacing.

Inline Forms

Aside from the normal form style in bootstrap you can also use an inline which will set inputs next to each other.

To do this, you just need to add the form-inline class to the form element.

&lt;form class=&quot;form-inline&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;name&quot;&gt;Your Name&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name&quot; placeholder=&quot;Your Name..&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;email&quot;&gt;Your Email&lt;/label&gt;
    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Your Email..&quot;&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit!&lt;/button&gt;
&lt;/form&gt;

The output of the code will look like the image below.

Inline forms

Horizontal Forms

To align form labels and fields in a horizontal manner in bootstrap, you just need to add the form-horizontal class to the form.

&lt;form class=&quot;form-horizontal&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;name&quot; class=&quot;col-sm-2 control-label&quot;&gt;Name&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;name&quot; placeholder=&quot;Your Name..&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;email&quot; class=&quot;col-sm-2 control-label&quot;&gt;Email&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Your Email..&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
      &lt;div class=&quot;checkbox&quot;&gt;
        &lt;label&gt;
          &lt;input type=&quot;checkbox&quot;&gt; Check me!
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;col-sm-offset-2 col-sm-10&quot;&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Sign Me In!&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;

The output of the code will look like the image below.

Horizontal forms

As you can see, the form has a horizontal layout. You’ll notice that I put some grid classes on the labels and doing so will make them behave like the grid system. You can also use icons by adding a span class with the glyphicon icon. Learn more about glyphicons.

Let’s see this in action.

&lt;div class=&quot;form-group has-success has-feedback&quot;&gt;
  &lt;label class=&quot;control-label&quot; for=&quot;Success&quot;&gt;Field with Success&lt;/label&gt;
  &lt;div class=&quot;input-group&quot;&gt;
    &lt;span class=&quot;input-group-addon&quot;&gt;@&lt;/span&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputSuccess1&quot; aria-describedby=&quot;inputSuccessStatus1&quot;&gt;
  &lt;/div&gt;
  &lt;span class=&quot;glyphicon glyphicon-ok form-control-feedback&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
  &lt;span id=&quot;inputSuccessStatus1&quot; class=&quot;sr-only&quot;&gt;(success)&lt;/span&gt;
&lt;/div&gt;

As you can see from the code above we set up an icon for the input field as well as added .has-feedback with right icon. We also use .sr-only and aria-describedy relating to each other to hide information for screen readers.

Form success

Tables

Bootstrap provides five layouts for tables.

  • Basic comes with simple table layout with only horizontal dividers. To use, just add class table on the <table> tag.
  • Striped rows comes with a zebra-stripe layout. To use, just add class table-striped on the <table> tag.
  • Bordered table comes with a typical table with border on each sides. To use, just add class table-bordered on the <table> tag.
  • Hover rows is like the basic style but with hover state within each row. To use, just add class table-hover on the <table> tag.
  • Condensed table comes with compact cell spacing and padding. To use, just add class table-condensed on the <table> tag.

Let’s take a look at the striped rows layout.

&lt;table class=&quot;table table-striped&quot;&gt;
     &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th&gt;Web Developer's Name&lt;/th&gt;
                    &lt;th&gt;Phone&lt;/th&gt;
                    &lt;th&gt;Email&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Rick Meyer&lt;/td&gt;
                    &lt;td&gt;(123) 456-7890 x10&lt;/td&gt;
                    &lt;td&gt;rickmeyer@email.com&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;James Patir&lt;/td&gt;
                    &lt;td&gt;(123) 456-7890 x11&lt;/td&gt;
                    &lt;td&gt;james@email.com&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td&gt;Roderick Lovegood&lt;/td&gt;
                    &lt;td&gt;(123) 456-7890 x12&lt;/td&gt;
                    &lt;td&gt;roderick@email.com&lt;/td&gt;
                  &lt;/tr&gt;
     &lt;/tbody&gt;
&lt;/table&gt;

As you can see the code above has ordinary table tags but using the class table-striped, we’ve styled it with zebra-stripe layout. You can set the background color of tables by changing the value of @table-bg via LESS variable and @table-bg-accent for the striped background color.

Table

Images

For images, bootstrap uses three classes inside an <img> tag to style images. They are the following:

  • img-rounded – styles the images to a rounded-radius shape corner
  • img-circle – styles the images to a circle-crop shape
  • img-thumbnail – styles the images in an elegant way with border and a little padding inside the image

Take note that images can be made responsive using the img-responsive class however IE 8-10, SVG images are disproportionately sized.  You can fix it by adding width: 100% \9; on your image CSS.

Let’s see this in action.

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;col-lg-12&quot;&gt;
&lt;div class=&quot;col-md-3&quot;&gt;
                           &lt;img src=&quot;img/image1.jpg&quot; alt=&quot;&quot; class=&quot;img-thumbnail img-responsive&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                            &lt;img src=&quot;img/image2.jpg&quot; alt=&quot;&quot; class=&quot;img-circle img-responsive&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                            &lt;img src=&quot;img/image3.jpg&quot; alt=&quot;&quot; class=&quot;img-rounded img-responsive&quot;&gt;
                     &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                            &lt;img src=&quot;img/image4.jpg&quot; alt=&quot;&quot; class=&quot;img-thumbnail img-responsive&quot;&gt; 
                     &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

On the code above we’ve used the three classes that we can use for images. Here’s the output.

Images

Boostrap Navbar

The navbar is one of the responsive components of Bootstrap that serves as the navigation header or container. It is a self-contained bar which has the ability to collapse on smaller screens.

Aside from menus, you can also add forms, search boxes and drop-down menus.

Here’s some example code.

  &lt;div id=&quot;navbar-main&quot;&gt;
      &lt;!-- Fixed navbar --&gt;
    &lt;div class=&quot;navbar navbar-inverse navbar-fixed-top&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;navbar-header&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
            &lt;img src=&quot;img/logo.png&quot; class=&quot;logo&quot;/&gt;
          &lt;/button&gt;
          &lt;a class=&quot;navbar-brand hidden-xs hidden-sm&quot; href=&quot;#home&quot;&gt; &lt;img src=&quot;img/logo.png&quot; class=&quot;logo&quot;/&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class=&quot;navbar-collapse collapse&quot;&gt;
          &lt;ul class=&quot;nav navbar-nav&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#home&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#base&quot;&gt;Base CSS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#forms&quot;&gt; Forms &amp; Tables&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#gallery&quot;&gt; Gallery&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#code&quot;&gt; Code&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href=&quot;#contact&quot;&gt; Address&lt;/a&gt;&lt;/li&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
       &lt;form class=&quot;navbar-form navbar-right search&quot; role=&quot;search&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Search&quot;&gt;
              &lt;/div&gt;
              &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

In Bootstrap, you need to define the role as navigation to help with accessibility. Followed by the navbar class, notice that I used navbar-inverse and navbar-fixed-top. Adding navbar-inverse class will add a black background and a white text on the menu while, the navbar-fixed-top will make it stick and fixed to to the top and make it scroll statically with the page.

Next, we’ve added .navbar-header to the <div> element along with the class navbar-brand in an anchor tag inside it.

To make responsive navigation, we’ve also set up the classes navbar-collapse and collapse. The class .navbar-toggle will enable the two data elements: data-toggle and data-target which will define which element to toggle. For us to be able to add links, we simply put an unordered list with inside the nav and navbar-nav class.

As a final step, we’ve added a simple search bar on the right side of our navbar via navbar-form class. Check out the output image.

Navbar
Nav bar

Conclusion

That’s a blast! In this second part of the tutorial, we’ve learned how Base CSS can be customized and used for the navigation system inside Bootstrap.

For the last part of our tutorial, we’re going to dig more into other components of Bootstrap that will surely help you on your projects. Stay tuned.

Newsletter

3 Comments
  1. Arno Jul 22, 12:11 pm

    In your example “Small Element” you’re using a class on the col-lg-4. I wouldn’t do this because with the styling on .callout you can cripple the working of bootstrap if you overwrite the bootstrap padding, float or min-height.

    I personally always try to keep the bootstrap logic as clean as possible so I would go with this:

    <div class="col-lg-4">
    <div class="callout">
    [component text here]
    </div>
    </div>
    
    • Rodel Kross Jul 24, 5:35 am

      I personally have no issues with this type of coding though. Bootstrap is a very flexible tool when it comes to using classes. However it might be case to case basis.

      Over all everything is cool on this tutorial.

  2. Andrei Jul 22, 6:25 pm

    I wonder what font-face used in described samples?

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!