Learn how to build a Blog website using Twitter Bootstrap

0
1648
blog-website

blog-website

In simple terms it is a piece of software which allows you to write an online diary on a website. Your last entry, called a post, is displayed on the front page, or the home page, of the site.

In this article, we are going to build a front-end of the blog website, that will be a fully functional responsive blog website using the Twitter Bootstrap. You will also learn about how to build a blog UI, customize carousel in depth with thumbnails, create a contact form with Map, a Grid with Sidebar, a Dropdown menu and conduct Mobile Optimization.

Steps for creating Layout & Navbar:
1) I’m going to create a new folder and call it the_blog. This is going to have just our basic structure. We’ll have our index page, our CSS folder, our JavaScript folder and our images folder. For the images, I’m going to grab them from the completed project.
the_blog
2) We have around 9 sample images and also the images for the blog, logo, and slides. So, we are going to take all those and put them into our images folder.
images-for-the-blog
3) Go to the Get Bootstrap and click on Getting Started and then select Basic Template. I’m going to select the Starter Template. Once you select the Template click on that template and you will get design of that template just right click on that template and you will be able to see a few options in the drop down menu. Select View Page Source and copy the the code. Paste the code in your html file; similarly you can also copy the CSS file and paste it in your bootstrap.css file. You can also do this for your js files and link those files in your html. Once you are successfully done with this click on index.html it will look like this:
index
starter-template
4) Let’s start with our DOCTYPE html tags. We already have template structure, so we are going to add our logo to the html file using the div tag. It will look like this:
doctype
5) Now we are going to add a container in our html file. As per the design, we want two containers so we are copying the navbar container and pasting it in our main div container. After that we changed our container name to container-fluid. Now we are going to add the dropdown list into our html file so the code looks like this:
add-a-container
6) Now create a style.css file in your css folder and add the following code in your css file. After adding code your html file look like this:
a-stylecss-file
html-file

Steps for Adding Custom Carousel Slider:
1) Go to the Get Bootstrap and click on Javascript. You will be able to see the option Carousel. Copy that code and paste it after </nav> in your html file. After that we are going to add the images and description in our html file. So, the code looks like this:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="img/slide1.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story One</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->
 
         <div class="item">
          <img src="img/slide2.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Two</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/slide3.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Three</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/slide4.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Four</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->

        <div class="item">
          <img src="img/slide5.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Five</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->

theblog

2) Now, we are going to create the thumbnail and intro text. For this we are using the unordered list and will assign a class to it. After that, we created a li list and we assigned some parameters like data-target and data-slide to the list as well as the thumbnail. So your code will look like this:

<ul class="list-group slider-list col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><img src="img/slide1.jpg" class="img-slide img-thumbnail"><h4>Slide Story One</h4><p>Tempor invidunt ut labore invidunt ut labor</p></li>
      <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><img src="img/slide2.jpg" class="img-slide img-thumbnail"><h4>Slide Story Two</h4><p>Consetetur sadipscing elitr, sed diam sadipscing elitr</p></li>
      <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><img src="img/slide3.jpg" class="img-slide img-thumbnail"><h4>Slide Story Three</h4><p>Eirmod tempor invidunt ut labore consetetur sadipscing</p></li>
      <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><img src="img/slide4.jpg" class="img-slide img-thumbnail"><h4>Slide Story Four</h4><p>Lorem ipsum dolor sit amet consetetur sed diam nonumy</p></li>
      <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><img src="img/slide5.jpg" class="img-slide img-thumbnail"><h4>Slide Story Five</h4><p>Lorem ipsum dolor sit amet consetetur magna aliquyam erat/p></li>
    </ul>

      <!-- Controls -->
      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>

3) After adding CSS for the Custom Carousel Slider, you will get the following output:

#myCarousel .carousel-caption{
	left:0;
	right:0;
	bottom:0;
	text-align: left;
	padding:10px;
	background:rgba(0,0,0,0.6);
	text-shadow:none;
}

#myCarousel .carousel-caption h4{
	color:#fff;
}

#myCarousel .carousel-caption p{
	padding:0;
	margin:0;
}

#myCarousel .list-group{
	position:absolute;
	top:0;
	right:0;
}

#myCarousel .list-group-item{
	border-radius:0;
	cursor:pointer;
}

#myCarousel .list-group .active{
	background:#eee;
	border:0;
	color:#666;
}

#myCarousel .list-group h4{
	font-size: 17px;
	padding:0 !important;
	margin:0 !important;
	padding-top:5px;
}

#myCarousel .img-slide{
	width:80px;
	height:100%;
	float:left;
	margin-right:5px;
}

blog-with-slider
4) Now we are going to create the Javascript file name as Main.js and we are going to include it in our html file. So your code looks like:
bootstrap-core-javascript
Main.js
main-js-file
5) Now we are going to add the Media Query to make it fully responsive. Add the following code in your style.css file.
media-query

Steps for Creating Blog Posts:
1) Now we are going to create a new div for our blog content, as well as create a new file name as post.html in your folder, so your code will look like this:

   <div class="row">
      <div class="col-md-8">
        <div class="well blog-post">
          <h3><a href="post.html">Blog Post One</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog1.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>
        </div>

        <div class="well blog-post">
          <h3><a href="post.html">Blog Post Two</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog2.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>
        </div>

        <div class="well blog-post">
          <h3><a href="post.html">Blog Post Three</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog3.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>

        </div>

blog-with-post
2) We are also going to add a well for blog search,categories and sidebars in our html file so your final html code looks like:

<!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>theBLOG</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="logo" src="img/logo.png" alt="theBLOG">
          </div>
          <div class="col-md-6">

          </div>
        </div>
      </div>
    </header>

    <div class="container container-main">
       <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>


   <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <img src="img/slide1.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story One</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->
 
         <div class="item">
          <img src="img/slide2.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Two</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/slide3.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Three</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <img src="img/slide4.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Four</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->

        <div class="item">
          <img src="img/slide5.jpg">
           <div class="carousel-caption">
            <h4><a href="#">Slide Story Five</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->


    <ul class="list-group slider-list col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><img src="img/slide1.jpg" class="img-slide img-thumbnail"><h4>Slide Story One</h4><p>Tempor invidunt ut labore invidunt ut labor</p></li>
      <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><img src="img/slide2.jpg" class="img-slide img-thumbnail"><h4>Slide Story Two</h4><p>Consetetur sadipscing elitr, sed diam sadipscing elitr</p></li>
      <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><img src="img/slide3.jpg" class="img-slide img-thumbnail"><h4>Slide Story Three</h4><p>Eirmod tempor invidunt ut labore consetetur sadipscing</p></li>
      <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><img src="img/slide4.jpg" class="img-slide img-thumbnail"><h4>Slide Story Four</h4><p>Lorem ipsum dolor sit amet consetetur sed diam nonumy</p></li>
      <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><img src="img/slide5.jpg" class="img-slide img-thumbnail"><h4>Slide Story Five</h4><p>Lorem ipsum dolor sit amet consetetur magna aliquyam erat/p></li>
    </ul>

      <!-- Controls -->
      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>

    </div><!-- End Carousel -->

    <div class="row">
      <div class="col-md-8">
        <div class="well blog-post">
          <h3><a href="post.html">Blog Post One</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog1.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>
        </div>

        <div class="well blog-post">
          <h3><a href="post.html">Blog Post Two</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog2.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>
        </div>

        <div class="well blog-post">
          <h3><a href="post.html">Blog Post Three</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Eduonix on November 21, 2016 at 10:00 PM</p>
          <hr>
          <img src="img/blog3.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <a class="btn btn-primary" href="post.html">Read More <span class="glyphicon glyphicon-chevron-right"></a>
        </div>

        <!-- Pager -->
<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">&rarr; Next</a>
  </li>
</ul>

      </div>
      <div class="col-md-4">
        <div class="well">
          <h4>Blog Search</h4>
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="well">
          <h4>Categories</h4>
          <div class="row">
            <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
             <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
          </div>
        </div>

        <div class="well">
          <h4>Sidebar Widget</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
        </div>
      </div>
    </div>
    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

3) Now your final style.css code will be look like this:

body {
  padding-bottom:20px;
  background:#333;
  color:#666;
}

.container-main{
	background:#f4f4f4;
	overflow:auto;
	border-radius:10px;
}

.logo{
	padding: 15px 0;
}

.navbar{
	margin-bottom:20px;
	border-radius:0;
	border:0;
	background:#f4f4f4;
}

/* Carousel Styles */
#myCarousel{
	margin-bottom:20px;
}

#myCarousel .carousel-caption{
	left:0;
	right:0;
	bottom:0;
	text-align: left;
	padding:10px;
	background:rgba(0,0,0,0.6);
	text-shadow:none;
}

#myCarousel .carousel-caption h4{
	color:#fff;
}

#myCarousel .carousel-caption p{
	padding:0;
	margin:0;
}

#myCarousel .list-group{
	position:absolute;
	top:0;
	right:0;
}

#myCarousel .list-group-item{
	border-radius:0;
	cursor:pointer;
}

#myCarousel .list-group .active{
	background:#eee;
	border:0;
	color:#666;
}

#myCarousel .list-group h4{
	font-size: 17px;
	padding:0 !important;
	margin:0 !important;
	padding-top:5px;
}

#myCarousel .img-slide{
	width:80px;
	height:100%;
	float:left;
	margin-right:5px;
}

.post-info{
	background:#333;
	color:#fff;
	padding:5px;
	border:#ccc 1px solid;
}

@media(min-width:992px){
	#myCarousel{padding-right:33.3333%;}
	#myCarousel .carousel-controls{display:none;}
}

@media(max-width:991px){
	.carousel-caption p, #myCarousel .list-group{display:none;}
}

@media(max-width:1200px){
	.slider-list p{display:none;}
}

sider-bar-with-the-blog

Steps for Creating Inner Pages:
1) We are now creating inner pages like about.html, post.html and contact.html. After creating this file, we are going to add coding (see the code below) in the post.html page; it is similar to index.html. Once you click on the Blog Post title, you will be able to see this blog post on your page.

<!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>theBLOG</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="logo" src="img/logo.png" alt="theBLOG">
          </div>
          <div class="col-md-6">

          </div>
        </div>
      </div>
    </header>

    <div class="container container-main">
       <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="row">
      <div class="col-md-8">
        <div class="well blog-post">
          <h3><a href="post.html">Blog Post One</a></h3>
          <p class="post-info"><i class="glyphicon glyphicon-time"></i> Posted by Brad Traversy on August 21, 2014 at 10:00 PM</p>
          <hr>
          <img src="img/blog1.jpg" class="img-responsive">
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
          <p>
In volutpat eu nisi vel sodales. Etiam sagittis magna id turpis elementum consequat. Nam ut aliquam metus, ut dictum quam. Fusce arcu libero, pharetra quis nibh a, dictum tempus ipsum. Ut scelerisque ipsum in commodo vulputate. Ut sollicitudin dictum iaculis. Integer lacinia dui non porta placerat. Duis vehicula vestibulum arcu, eu porta odio. Proin at mauris blandit, vulputate mi ut, maximus diam.</p>
<p>
Mauris iaculis mi ac elit ultricies congue. Sed vitae ante id sem gravida sagittis. Morbi ac massa lectus. Vivamus ac ullamcorper enim, vitae tempus libero. Vestibulum convallis tortor sit amet leo pulvinar pharetra. Pellentesque quam nunc, pulvinar ut gravida eu, sagittis non quam. Suspendisse suscipit ante et sapien hendrerit, vitae congue nisi dapibus.</p>
        </div>

        <br><br>
        <h2>Comments</h2>
        <form>
           <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control">
          </div>
          <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control">
          </div>
           <div class="form-group">
            <label>Body</label>
            <textarea class="form-control"></textarea>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

      </div>
      <div class="col-md-4">
        <div class="well">
          <h4>Blog Search</h4>
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="well">
          <h4>Categories</h4>
          <div class="row">
            <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
             <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
          </div>
        </div>

        <div class="well">
          <h4>Sidebar Widget</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
        </div>
      </div>
    </div>
    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

blog-inner-page
2) Similarly Ihere is the code for the About Us page.

<!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>theBLOG</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="logo" src="img/logo.png" alt="theBLOG">
          </div>
          <div class="col-md-6">

          </div>
        </div>
      </div>
    </header>

    <div class="container container-main">
       <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li class="active"><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="row">
      <div class="col-md-8">
        <div class="well">
          <h2>About Us</h2>
          <div class="well">
           <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
         </div>
          <p>
In volutpat eu nisi vel sodales. Etiam sagittis magna id turpis elementum consequat. Nam ut aliquam metus, ut dictum quam. Fusce arcu libero, pharetra quis nibh a, dictum tempus ipsum. Ut scelerisque ipsum in commodo vulputate. Ut sollicitudin dictum iaculis. Integer lacinia dui non porta placerat. Duis vehicula vestibulum arcu, eu porta odio. Proin at mauris blandit, vulputate mi ut, maximus diam.</p>
<p>
Mauris iaculis mi ac elit ultricies congue. Sed vitae ante id sem gravida sagittis. Morbi ac massa lectus. Vivamus ac ullamcorper enim, vitae tempus libero. Vestibulum convallis tortor sit amet leo pulvinar pharetra. Pellentesque quam nunc, pulvinar ut gravida eu, sagittis non quam. Suspendisse suscipit ante et sapien hendrerit, vitae congue nisi dapibus.</p>
        </div>

      </div>
      <div class="col-md-4">
        <div class="well">
          <h4>Blog Search</h4>
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="well">
          <h4>Categories</h4>
          <div class="row">
            <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
             <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
          </div>
        </div>

        <div class="well">
          <h4>Sidebar Widget</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
        </div>
      </div>
    </div>
    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

aboutus
3) Now, we are going to create a Contact Us page in which we are going to integrate theGoogle map. To incorporate this, you first need to search your address on the Google Map. Once you have your address, click on share button, which give you two options: share a link and embed map. Select the embed map tab, copy the URL and paste it in your contact us page.
embed-map-code
Here is a copy of the attached code for the Contact Us page:

<!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>theBLOG</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <img class="logo" src="img/logo.png" alt="theBLOG">
          </div>
          <div class="col-md-6">

          </div>
        </div>
      </div>
    </header>

    <div class="container container-main">
       <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li class="active"><a href="contact.html">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="row">
      <div class="col-md-8">
        <div class="well">
          <h2>Contact Us</h2>
          <form>
           <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control">
          </div>
          <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control">
          </div>
           <div class="form-group">
            <label>Message</label>
            <textarea class="form-control"></textarea>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <br><br>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.9238190851715!2d73.01303531446852!3d19.110997687067815!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c0c2bfb9208b%3A0x8b2c12d747dcc485!2sEduonix+Learning+Solutions!5e0!3m2!1sen!2sin!4v1478157508112" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>" width="700" height="450" frameborder="0" style="border:0"></iframe>
        </div>

      </div>
      <div class="col-md-4">
        <div class="well">
          <h4>Blog Search</h4>
          <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="well">
          <h4>Categories</h4>
          <div class="row">
            <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
             <div class="col-md-6">
               <ul class="list-unstyled">
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                                <li><a href="#">Category Name</a>
                                </li>
                            </ul>
            </div>
          </div>
        </div>

        <div class="well">
          <h4>Sidebar Widget</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
        </div>
      </div>
    </div>
    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

contact-us
I hope this has been helpful for you guys in understanding how to create front-end blog website using the Twitter Bootstrap. Goodluck!

LEAVE A REPLY

Please enter your comment!
Please enter your name here