What is bootstrap framework? Why should I use bootstrap?

As of today, Most of the youth is using their smartphones to access internet. If I want to create a basic website and want good response from public, I have to create that website responsive with mobile.
what-is-bootstrap-learn-responsive-web-designing-at-suratnow

There are various size of devices, in which public access internet. My website is likely to get rated on basis of its responsive designing. If my website is not responsive, Visitors won’t stick to my website for long.




To create a good responsive website, with ease in CSS and HTML, I have to use Bootstrap Framework.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development.
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • Bootstrap also gives you the ability to easily create responsive designs.

What is Responsive Web Design?
what-is-responsive-design-learn-at-suratnow

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Why should I use Bootstrap?

responsive web designing with bootstrap suratnow

  • Any one with basic knowledge of HTML and CSS can use Bootstrap.
  • Bootstrap provides responsive CSS for various device sizes.
  • Bootstrap 3 provides mobile-first styles as a core part of framework.
  • Bootstrap supports all Modern Browsers like Google Chrome, Firefox, Opera, Safari, and Internet Explorer.

How to get Bootstrap?

There are two methods to get Bootstrap in your Web design.

  • Method 1: Download Bootstrap from getbootstrap.com
  • Method 2: If you don’t want to download bootstrap, then just include it from a CDN (Content Delivery Network).

For Method 1

Download bootstrap from getbootstrap.com and host it yourself .

Extract your downloaded Bootstrap Zip file in your Public_HTML folder. Then include bootstrap.min.css file for bootstrap css. As Extraction Folders Named css, js and fonts will be inside Public_HTML folder.

You can include HTML using following code in <head> tag of your HTML file.

<!-- For Minified Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- For Minified Bootstrap JavaScript -->
<script src="js/bootstrap.min.js"></script>

For Method 2

In this method you don’t need to download bootstrap and use your server space(Which barely uses 1.60 MB), you will use CDN as a source of bootstrap files. All you need to do is just use following code in <head> tag of your HTML file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

What is included in Bootstrap?

Bootstrap includes css, javascripts, and glyphicon fonts. As we mentioned before Bootstrap provides pre-defined bootstrap classes with respective pre-defined css and javascripts.

There is one more feature provided by Bootstrap, that is Glyphicons.

What is Glyphicons?

what-is-glyphicons-in-bootstrap-how-to-use-learn-at-suratnow

GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.

Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc. Those are same as fonts, so you can change color of glyphicons like fonts.

Here are some examples of glyphicons:




Music glyphicon :

<span class="glyphicon glyphicon-music"></span>

Search glyphicon :

<span class="glyphicon glyphicon-search"></span>

Eye glyphicon :

<span class="glyphicon glyphicon-eye-open"></span>

Shopping cart glyphicon :

<span class="glyphicon glyphicon-shopping-cart"></span>

This is how you can use glyphicons in your HTML web page.

That’s all What Bootstrap includes. We will include more about bootstrap in our next blog.

Thank you for reading this blog, ask your questions or give us your opinions in comment box. Hope this blog proved helpful to you. Share it with your friends.

Latest

Audio File Formats and Compressions Explained

If you are into music, it might seem like there are just way to many audio formats to choose from. Can’t we just use Mp3…..

Coolpad Cool 1 Dual Review and Specs: Dual is Cool

Coolpad and LeEco joined their forces to create the Coolpad Cool 1 Dual. This smartphone was announced soon after LeEco’s CEO Jia Yueting took place as…..

Oneplus 5: The best is yet to come!

We are just 40 hours away from the official announcement of Oneplus 5. But there is no point of announcement when the exclusive look of the…..

What is URL? How it Works?

If you have ever used the Internet, which you have probably done considering that you are reading this blog right now, you have almost certainly…..

Samsung Galaxy J7 Pro Overview and Specs: Life is Now

Samsung has received tremendous response from the consumers with their Galaxy J series. As the tag line of the Galaxy J Series “Innovations for you”…..

Oppo R11 Plus Overview and Specs: Dual Rear Camera and Selfie Expert

Selfie Expert, this is the tag line for Oppo’s smartphones. Starting from the Oppo F1 to Oppo F3 plus, All those were Selfie Experts. This…..

Moto Z2 Play Review: Unlimited Possibilities

Since Lenovo bought Motorola, we are getting smartphones with uniqueness. Each and every one of their smartphone has it’s own unique feature. Or if you…..

Tesla Model S: Features and Overview

Today, I am going to tell you about all the features of Tesla Model S. So, What makes Tesla Model S such an advanced car……

Samsung Galaxy J3 Pro Review: Best Low Budget phone?

Samsung has been focused on their Flagship smartphones like Samsung Galaxy S8 and Samsung Galaxy S8 Plus, Samsung is being successful with those, but as you mention…..

Why Encryption is necessary? Why back-door is a bad idea?

Encryption has become a major debate recently. Recently, Apple wrote an open letter to the US government, explaining why forcing companies to insert a back-door…..

HTC U11 Full Review: Does HTC Worth It?

The HTC U11 is a smartphone full of contradictions. A stunning back plate made into a forgettable face, quick software blunted by extraneous gimmicks, slick…..

Samsung Dex: Using your Smartphone like a Desktop Computer

The Samsung Dex, the dock that turns your Samsung smartphone into a computer. Probably the coolest thing about Samsung Dex is that it exists at…..

Andy Rubin’s Essential Phone Specs and Overview: Bezel-less Design

Essential Ph1 is not just another anonymous startup, who promise to reinvent the smartphone. The man in the captain’s chair is Andy Rubin. He is…..

Hackintosh – running MacOS on non-Apple hardware, How it works?

If you are interested in computer building, you might have noticed a common thread and most of the how to guides out there on the…..

What is Application Programming Interface (API)? What it does?

API can be just as important as device driver, but if a driver is already there, then to serve as the link between your hardware and programs, then….

Gionee S10 Specs and Overview: Smartphone with Four Cameras

Two months ago, Gionee Released their selfie centred smartphone Gionee A1 #Selfiestan. Now, they are back with another surprise to the consumers with a Four…..

Xiaomi Redmi 4: Smartphone with Record Breaking Sales

Xiaomi Redmi 4, In online sale across their official website and Amazon, they sold over 250K+ units within mere 8 minutes. The rush for buying…..

HTC’s Flagship for 2017, HTC U11 Specs and Overview

After getting not so good response with HTC U Ultra, HTC has to make a great comeback. This is their chance. HTC U11 is HTC’s Flagship smartphone…..

Xiaomi’s Flagship for 2017, Xiaomi Mi 6 Specs and Overview

Xiaomi recently unveiled their Flagship smartphone Xiaomi Mi 6. Xiaomi highlighted their key new features at the event, features like Snapdragon 835 chipset, 6 GB of…..

Top 5 Announcements from Google I/O Keynote (Google I/O 2017)

Google I/O is basically a Developer Conference for people who use Google software and for all those developers of apps that run on those Google…..

  • Get more stuff like this
    in your inbox

    Subscribe to our mailing list and get interesting stuff and updates to your email inbox.