How to use of Bootstrap to make a Responsive Website.

If you haven't watched CSS Lesson 1 and CSS Lesson 2 yet, I reccomend you to watch that first.











What is a Responsive Website?

Responsive website is a website that can adjust itself according to the users' needs based on screen size, platform and orientation. It consists of fixable grids and layout, intelligent use of CSS media.
If you have learned my previous lessons about HTML and CSS then it will be very easy to learn 'How can we make a responsive website'. 
We will be making a responsive website with the help of Bootstrap.

About Bootstrap

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Bootstrap was created at Twitter in mid-2010 by @mdo and @fat. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

Let's Start

Open your text editor. Write HTML code of your Website, name it as 'Bootstrap Responsive Website'.
Code:-


<!DOCTYPE html>
<html>
<head>
      <title>Bootstrap Responsive Website</title>
      <div class="container">
      <style type="text/css">
        .col-sm-5 {
        background: lavenderblush;
        }
        .col-sm-2 {
        background: lavender;
        }
      </style>
</head>
<body>
           <h1>Heading</h1>
           <div class="row">
            <div class="col-sm-5">Col1</div>
            <div class="col-sm-2">Col2</div>
           </div>
            <div class="row">
            <div class="col-sm-2">Col3</div>
            <div class="col-sm-5">Col4</div>
            <div class="col-sm-2">Col5</div>
           </div>
           <p>This is my Paragraph 1.</p>
           
       </div>
</body>
</html>

Result:-
Now go to Bootstrap. Click on Download, Here you will find Bootstrap CDN. Copy that four lines of code (Also provided below) and paste it in your header section of your HTML file. Now see the magic.

Bootstrap CDN:-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Here is your responsive Website. I hope you liked this lesson of "How to make a Responsive website with Bootstrap".

Comments

  1. tamil27 March 2019 at 23:02

    I appreciate the effort of the author. I found it is an informative post on bootstrap technology. I hope you shared this kind of blog in future to help both the developer and business people.
    Hire PHP Developer
    Hire Magento Developer India
    Hire Web Developer

    ReplyDelete

Post a Comment

Popular posts from this blog

How to get Traffic on new Blog.

Image
There are 5 ways to to get traffic on your new blog. Leave enticing and insightful comments in other blogs. Start commenting on posts of other bloggers in your niche. Just commenting 'Nice post' or 'good work' won't work. Add something in their post in comment or show them something from your blog that can help their post. This will help you to get traffic from his blog also and increase your online presence. Help out other new bloggers. If you help other bloggers in your niche they will comeback and help you. Help them by telling them about good templates, SEO and stuff that you are good at. Share other Bloggers posts. This will increase your reputation in the blogging community as someone helpful. You can share their blog posts or you can tweet them on twitter. If you complement somebody they will comeback and complement you. Be a Friend. If you be a friend with some other blogger. There are more chance that he will link back to you and keep v...
Read more

How fix Blank Adsense Ads in Blogger?

Image
If your Account was approved through Youtube and you want to place Ads in Blogger sub-domain like   (Example.blogspot.com)  You need to delete your Adsense account and create a new account. It will take a few minutes. After you will make a new account your blogger ads will be setup again by Google. Wait for 24 Hours as Google will review your blogger application. Make sure your Blog is all set for review and has atleast 10 posts. You will see this in your Blogger and and Adsense. If your Account was Approved through Youtube/Blogger and you want to place Ads in high level domain like (Example.com) You must be seeing this in the top of your Adsense account Dashboard. Click on Action and Provide the URL of your Domain and Adsense will review your Application and if your Blog is well managed and has atleast 10 posts, Adsense will accept your application. I hope this post about how to fix Blank Ads in blogger helped you too.
Read more

How to check and fix broken links in your blog?

Image
Open your bowser and and open  brokenLinksChecker .  Enter your blog URL there and press "Find Broken Links". It will start finding your broken links.  While it is finding your broken links, open  webmasterTools , and open Google Index/Remove URLs.  Copy the links from the broken links tab and copy them into  Temporarily Hide,  Hit continue and do the same for all the links. Thanks!  I hope this post about How To Fix Broken Links In Your Blog helped you too!
Read more