Skip to main content

Creating the Sticky footer with fixed navbar example with Bootstrap 3 using Emmet.IO

This post described how to use Emmet short codes to quickly create the bootstrap example: Sticky footer with fixed navbar using Bootstrap 3. Feel free to read and implement suggestions.

Step 1: Set up: Set up html, and body content, js

Emmet Code

html:5>(div.navbar.navbar-default.navbar-fixed-top>div.container>div.navbar-header>btn:r.navbar-toggle>span.sr-only{Toggle navigation}+span.icon-bar+span.icon+span.icon^a.navbar-brand{Welcome!}^div.collapse.navbar-collapse>ul.nav.navbar-nav>li*3>a^li.dropdown>a.dropdown-toggle{Dropdown }>b.caret^ul.dropdown-menu>li*3>a^li.divider+li.dropdown-header{Nav Header}+li*3>a^^^^^^^div.container>div.page-header>h1{Page Header Heer}^p.lead>lorem^^div#footer>div.container>p.text-muted{Copy Right Info}^^script:src{js/jquery-1.11.0.min.js}+script:src{js/bootstrap.min.js})

There are some limitations with Emmet, such as not being able to define JavaScript source location. We will need to make some tweaks.

Tweaking the output

For this specific code, we will need to:

  1. Add role=navigation to: navbar.navbar-default.navbar-fixed-top
  2. At the toggle navigation <button> add: data-toggle="collapse" data-target=".navbar-collapse"
  3. Add your link to under: navbar-brand
  4. Add link, text and active item to: nav.navbar-nav remove
  5. In same class as above but in dropdown dropdown-toggle, add data-toggle="dropdown"
  6. Edit h1 tag in: page-header class div
  7. Update copyright information
  8. Move js path that's between script tags to src=""

Step 2: Insert the rest of the header information

Emmet Code

Next, we will be using some edit code to fill in the header tags. Please note that you will need to place your courser under the title tag.

meta:vp+link:favicon+meta:compat+link:css{css/bootstrap.min.css}+link:css

Tweaking the output

Now we will need to make some tweaks to our code.

  1. Favicon.ico if needed
  2. Change ie=7 to ie=edge in meta tag.
  3. In the style.css where you bootstrap is nested in, cut and paste the bootstrap style sheet in place of styles.css.
  4. In between the updated bootstrap css and styles.css, paste your conditional comments.
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  5. In the file styles.css paste the bootstrap example styles from the Bootstrap example css file