Learn how to build a Blog website using Twitter Bootstrap

0
810
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:

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:

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

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:

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:

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

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.

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

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:

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