Bootstrap Website template – Starting and Header

Bootstrap is one of the most important web framework for faster and easier web development. It uses HTML, CSS and Javascript as any other framework. in this post I will start a new tutorial on creating a full template using Bootstrap. the main landing page of the template is single page template with anchor menu and to make it more interactive I will use a some of javascript project and snippets.

Now let’s examine the structure of Bootstrap after downloading the compiled and minified CSS, JavaScript, and fonts from http://getbootstrap.com/getting-started/#download. Bootstrap have 3 folders (css, fonts and js). listed below all files inside these folders:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

Bootstrap comes with compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS source maps(bootstrap.*.map) are available for use with certain browsers’ developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.

Lets start with by adding all of these folder into new folder inside our project let’s name it “assets”. it will be good idea to create “images” folder inside our assets folder.

bootstrap/
├── assets/
│   ├── css
│   ├── fonts
│   ├── images
│   └── js
└── index.html

bootstrap/

├── assets/

│ ├── css

│ ├── fonts

│ ├── images

│ └── js

└── index.html

let’s create our first file “index.html” and link the compiled and minified version of CSS and JS file into it. adding HTML5 shim and respond.js will be a good idea and good start point. and don’t forget to include jQuery it is required for Bootstrap actions

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>

    <!-- Bootstrap css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery needed for Bootstrap's JavaScript plugins -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

I will build this template as we go step by step including the most common page sections note lets have our header section. in most of website header section have the brand name and a top navigation as main items and it might have social icons or/and search bar. after our “<body>” opening tag lets add our “<header>” and lets give it the default classes of bootstap “navebar navnar-default” I like to make to make to stick to top with scroll so I added “navbar-fixed-top”

<header class="navbar navbar-default navbar-fixed-top">
</header>

1 2	<header class="navbar navbar-default navbar-fixed-top"> </header>

by default “header” tag will fit the width of the browser so let’s include a container that can be wrapper for the navigation and brand name so lets add “div” inside our “<header>”

<header class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand name -->
            <a id="logo" href="#" class="navbar-brand" title="Template Name">Template Name</a>
            <!-- Navagation -->
            <nav class="collapse navbar-collapse" id="mainNavBar">
                <!-- Top Navagation Menu -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#hero">Home</a></li>
                    <li class=""><a href="#features">Features</a></li>
		            <li><a href="#image">About</a></li>
		            <li><a href="#gallery">Gallery</a></li>
		            <li><a href="#faq">FAQ</a></li>
		            <li><a href="#slider">Testimonials</a></li>
		            <li><a href="#newsletter">Subscribe</a></li>
                </ul>
            </nav>
        </div>
    </header>

<a id="logo" href="#" class="navbar-brand" title="Template Name">Template Name</a>

<li class=""><a href="#features">Features</a></li>

<li><a href="#image">About</a></li>

<li><a href="#gallery">Gallery</a></li>

<li><a href="#slider">Testimonials</a></li>

<li><a href="#newsletter">Subscribe</a></li>

</ul>

</nav>

</div>

</header>