Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating a Blog with Bootstrap

A blog is a great way to add interactivity to your website. This tutorial provides the code you need to build an enterprise-level blog using the Bootstrap framework.

Keeping your users and customers up to date and providing a medium for interaction is essential to success on the web. Although the concept sounds great, the design of the blog, and the quality of its content, will determine the success or failure of your blog. This article covers the design of the blog and will provide you with the steps to create a blog for your website using the Bootstrap framework.

Below is the HTML, CSS, and JavaScript required.

Create your Blog Overview Page

The blog overview page will display all of your blog posts as shown above. When a blog post is clicked it will direct the viewer to a detail page we will create in the next section.

Step 1 - blog-overview.html

Add the HTML below to your web page

<header class="header--type2" data-background="http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/blog.jpg" data-height="35%" style="background-image: url(http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/blog.jpg); min-height: 303.8px; -webkit-user-select: auto;">
  <div class="inner" style="-webkit-user-select: auto;">
    <div class="container" style="-webkit-user-select: auto;">
      <div class="row" style="-webkit-user-select: auto;">
        <div class="col-md-10" style="-webkit-user-select: auto;">
          <section class="ct-page_title" style="-webkit-user-select: auto;">
            <div class="h1" style="-webkit-user-select: auto;">Blog</div>
            <div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
          </section>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
  <div class="row">
    <div class="col-md-12 ct-content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div id="theBlogGrid">
              <ul class="row blogGrid" id="blogGrid">
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="21">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/case-studies/building-in-webcorpco-cms-8.stml'">
                    <img alt="Building in WebCorpCo CMS 8" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-4.jpg">
                    <div class="description-box animateBottomName">
                      <p>Building in WebCorpCo CMS 8</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="20">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/news/webcorpco-named-to-inc.-5000.stml'">
                    <img alt="What's New in WebCorpCo CMS 8" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-2.jpg">
                    <div class="description-box animateBottomName">
                      <p>WebCorpCo Named to Inc. 5000</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="19">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/blog-posts/whats-new-in-webcorpco-cms-8.stml'">
                    <img alt="WebCorpCo Named to Inc. 5000" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-3.jpg">
                    <div class="description-box animateBottomName">
                      <p>What's New in WebCorpCo CMS 8</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="18">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/news/webcorpco-cms-8-launches.stml'">
                    <img alt="WebCorpCo CMS 8 Launches" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-1.jpg">
                    <div class="description-box animateBottomName">
                      <p>WebCorpCo CMS 8 Launches</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
              </ul>
              <div class="blue-border blog-blue-border"></div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
  <div class="row">
    <div class="col-md-12 ct-content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div id="theBlogGrid">
              <ul class="row blogGrid" id="blogGrid">
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="21">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/case-studies/building-in-webcorpco-cms-8.stml'">
                    <img alt="WebCorpCo CMS 8 Launches" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-1.jpg">
                    <div class="description-box animateBottomName">
                      <p>Building in WebCorpCo CMS 8</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="20">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/news/webcorpco-named-to-inc.-5000.stml'">
                    <img alt="WebCorpCo Named to Inc. 5000" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-3.jpg">
                    <div class="description-box animateBottomName">
                      <p>WebCorpCo Named to Inc. 5000</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="19">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/blog-posts/whats-new-in-webcorpco-cms-8.stml'">
                    <img alt="What's New in WebCorpCo CMS 8" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-2.jpg">
                    <div class="description-box animateBottomName">
                      <p>What's New in WebCorpCo CMS 8</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
                <li class="col-xs-12 col-sm-6 col-md-3 blog-inner" id="18">
                  <div class="imgHolder" onclick="location.href='/about-us/blog/news/webcorpco-cms-8-launches.stml'">
                    <img alt="Building in WebCorpCo CMS 8" class="grid-image img-responsive" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-4.jpg">
                    <div class="description-box animateBottomName">
                      <p>WebCorpCo CMS 8 Launches</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </li>
              </ul>
              <div class="blue-border blog-blue-border"></div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2 - blog-overview.css

Download the CSS below and include it in your web page

blog-overview.css

Step 3 - Add the includes below to your Blog Pages

<link rel="stylesheet" href="blog-overview.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Create the Blog Detail Page

After a viewer clicks on a blog post from the Blog Overview page, they will be directed to a blog detail page with the full blog post's contents. It contains a header, sub header, graphic, description, etc.

Blog Detail Page

Step 1 - blog-detail.html

Add the HTML below to your web page

<header class="header--type2" data-background="http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/blog.jpg" data-height="35%" style="background-image: url(http://www.webcorpco.com/core/fileparse.php/37/urlt/assets/images/sectional-images/blog.jpg); min-height: 303.8px; -webkit-user-select: auto;">
   <div class="inner" style="-webkit-user-select: auto;">
      <div class="container" style="-webkit-user-select: auto;">
         <div class="row" style="-webkit-user-select: auto;">
            <div class="col-md-10" style="-webkit-user-select: auto;">
               <section class="ct-page_title" style="-webkit-user-select: auto;">
                  <div class="h1" style="-webkit-user-select: auto;">
                     Blog
                  </div>
                  <div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
               </section>
            </div>
         </div>
      </div>
   </div>
</header>
<div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
   <div class="dynamicDiv" id="dd.0.1.0"></div>
   <div class="row">
      <div class="col-md-12 ct-content">
         <div class="dynamicDiv" id="dd.0.1.1">
            <div class="blog-wrapper">
               <h1>
                  What's New in WebCorpCo CMS 8
               </h1>
               <img alt="blog-2.jpg" class="img-responsive pull-right blog-inner" src="http://www.webcorpco.com/core/fileparse.php/73/urlt/blog-1.jpg">
               <p>
                  <b>Orlando, Florida, August 13, 2015</b> -- Inc. magazine today ranked WebCorpCo as the 1,870th fastest growing company on the 34th annual Inc. 5000 and 9th fastest in the state of Florida. The Inc. 5000 is an exclusive ranking of the nation's fastest-growing private companies and represents the most comprehensive look at the most important segment of the economy-America's independent entrepreneurs. Companies such as Yelp, Pandora, Timberland, Dell, Domino's Pizza, LinkedIn, Zillow, and many other well-known names gained early exposure as members of the Inc. 5000.
               </p>
               <p>
                  "We are honored to have made the Inc. 5000 and see it as another validation point of our overall business strategy," says Shawn Moore, Founder and CTO of WebCorpCo. "WebCorpCo is on the move and will be making some exciting announcements in the weeks ahead - we expect 2015 and 2016 to be huge years for us as we execute on the most important initiatives in our company's history."
               </p>
               <p>
                  The 2015 Inc. 5000 is the most competitive crop in the list's history. The average company on the list achieved a mind-boggling three-year growth of 490%. The Inc. 5000's aggregate revenue is $205 billion, generating 647,000 jobs over the past three years. "The story of this year's Inc. 5000 is the story of great leadership. In an incredibly competitive business landscape, it takes something extraordinary to take your company to the top," says Inc. President and Editor-In-Chief Eric Schurenberg. "You have to remember that the average company on the Inc. 5000 grew nearly six-fold since 2012. Business owners don't achieve that kind of success by accident." Founded in 2006, WebCorpCo is an enterprise website content management software developer.
               </p>
               <p>
                  WebCorpCo CMS customers include the Florida Department of Education, MobileHelp, the Dr. Phillips Center for the Performing Arts, and the CNL family of companies. WebCorpCo has earned several major awards in the past year. The Miami Beach Information mobile app was judged to be 2014's best travel destination app by Travel Weekly and earned the Gold Magellan award, finishing ahead of the silver-award winning Hotwire.com app. More about Inc. and the Inc. 500|5000
               </p>
            </div>
         </div>
      </div>
   </div>
</div>

Step 2 - Add the includes below to your Blog Detail page

<link href="blog-overview.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

Note: If you followed the steps above correctly your overview and detail pages should appear as they do below.

Blog Overview Page

Overview Page

Blog Detail Page

Detail Page

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev