First of all, lets talk about Creating a responsive website using Bootstrap.

I'm going to tell you it's really easy.  In fact, some web developers like myself use it all the time.

Why?

It has to do with functionality, speed and utilities/Components.  But before we dive into some reasons why to use Bootstrap lets talk about what Bootstrap is all about.

What is Bootstrap?

responsive website using Bootstrap

 

 

Bootstrap is a popular framework that allows you to build responsive websites by working on all mobile devices with a Bootstrap cdn and template.  In layman's terms it's a framework to build responsive websites fast.  For a person that owns a small business, such as a physician, restaurant owner, or handy man, this stuff is going to be kind of confusing for you.

What do I mean?

In order to get those gorgeous sites that has nice images, it's going to take a lot of time and effort.  Not to mention the time to code everything out to make it look pretty.  If I was a small business owner, I would definitely leave it to the professional Web Developers that can speed up the process.

But my goal of this article is to inform you what goes on in creating a responsive website using Bootstrap.

Some other facts about Bootstrap include:

  • It's open source - aka FREE!
  • builds prototypes quickly for apps
  • responsive grid system
  • built in components
  • powerful jQuery plugins
  • popular frontend framework

Okay so this is basically everything you need to know about Bootstrap.

3 Reasons to create a responsive website using Bootstrap

  1.  Functionality

Using Bootstrap allows functionality to make your website pop.  Forget using WordPress or Wix because having your custom made website will set you apart from the rest of the crowd.

The components to create your layout for your project is straight forward.  The containers, grid system, and object classes allow you to create a smooth flow in customization.

Also, the media queries creates awesome interfaces to import Sass files easily.  In addition, I personally love how easy it is to create a navigation bar at the top, which include links to other pages, such as About, Services and Contact.  You know that thingy.

2.  Speed

The time it takes to create something from scratch could be done in a day or 2.  But if you're really hardcore just straight coding non-stop, it could be done in a day depending on the size of the website.  Yes, it really depends on how much functionality you want it to have.  However, if you have a back end or something complicated and a shopping cart and a login page then yeah it's going to take a longer time.

In a nutshell speed is huge with Bootstrap.  This is one of the main reasons why we use it.

3.   Utilities and Components

Okay so I thought I would lump these two together because this is sort of the meat of Bootstrap.  This is what takes Bootstrap to another level of awesomeness.

Creating a responsive website using Bootstrap has never been more organized.

The components, such as the buttons, images, bread crumbs, drop down menus and navigation just to name a few has a lot of styling in them which makes it much faster.

 

Read my latest articles =>   8 Reasons why websites make a good investment    What have I been up to in 2018?

 

How to get started building a responsive website using Bootstrap?

Basically, in order to get started you will need:

  1.  A text-editor

A text-editor enables you to write HTML, CSS and Javascript.  These are the building blocks to create any website.

Think of a text-editor as a notebook to write a computer language that interprets the code in a browser.  I use Brackets text-editor from Adobe.  However, there's many types of free text-editors out there, such as VSCode, Atom, Sublime, Note Pad++ and so much more.

Many Web Designers and Developers use Atom, and Sublime, but it's purely your choice.   The reasons why Web Developers and Designers use Atom and Sublime is because of the excellent features and functionality.  For me simplicity and functionality is what matters to me the most.

2.  HTML, CSS, Javascript

In order to write any code, you should learn the basics of HTML, CSS and Javascript.  HTML stands for Hyper Text Markup Language.  CSS stands for cascading style sheet.  These two are the foundation of any website.  HTML is more of a script or tags that hold the content that describes each web page.  It's more like the words on this page much like a newspaper.

CSS is the styles that makes a website pretty.  CSS enables you to put pictures, layouts, grids, background color and borders on your web page.  There's many more things you can do with CSS, so I encourage you to take a look at it one day.

Javascript is the behavior of a web page.  It makes the website functional and interactive for the user.  For example, imagine you have a login form and you have the person input a username and password.  But before they login, the user needs put in their first name, last name and email address to register.  Well, this is what Javascript does, it makes a website interactive.  Perhaps you want to include a back end database for user information in order to have them register, this is how powerful Javascript can be.

Then when you've grasped the basics of HTML, CSS and Javascript then you can build something really cool with Bootstrap.

There's some really good courses from Udemy, Freecodecamp, and Team Treehouse.  These are paid courses, which usually ranges from 0-$30 dollars.  I personally browsed through YouTube tutorials and blogs first before buying a course.  However, I highly recommend Udemy.com because they have over 65,000 courses and quality instructors to get you up and running fast.

3.  Download Bootstrap

If you've mastered the basics then you're ready to create a responsive website using Bootstrap.

I recommend going through a tutorial online from anywhere to get started.  Some FREE tutorials include: W3schools and Udemy.com 

Steps:

  • Download the latest version from Bootstrap and go to getbootstrap.com 
  • OR copy and paste this CSS link in your head
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  • Copy and paste these script tags just right above the closing</body> tag
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Example:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>




I suggest going through some tutorials online at sites, such as W3schools, and Udemy.com to get the basics down.  I am not an affiliate 
of anyone, but haveexperienced phenomenal results with them.  

If you want to hear about any recommendations leave a comment below, so I can maybe do an article on it someday. Now keep in mind that it's on Bootstrap 4, but the version may change in the future to include more updates.

 

Happy learning! Hey check out what I did in Bootstrap

Contact me to get started on your website!!!!!!!

Bootstrap Examples:

responsive website using Bootstrap

 

responsive website using Bootstrap

 

responsive website using Bootstrap

 

responsive website using Bootstrap

[activecampaign form=5]