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

Data Breaching and Hacking Preventions

Recently,  number of cases of getting Credit card or bank account hacked has grown too much. So, probably this is a great time to talk…..

What is the largest possible Size of a Single File?

Kids from 2000s, you may not remember a time before a 120 GB hard drives were the bare minimum, but other of you from 90s…..

File Systems: What is FAT and NTFS? Which one is better?

You probably know someone, who is always miss placing stuff, I do personally. Whether they can not find their keys in the morning, they leave…..

App Review: MoveIt – transfer Media Files Automatically

From the title of the blog, you will think that, what is new in that? But well, there are some features in this you will…..

Status Forever: Android App to get Status for every mood

Are you looking for new Status to put on your Social media account? Whether you are feeling sad or true love, you will get all…..

Vivo Y69: Review and Specifications

The Chinese smartphone manufacturer Vivo always try to give you good and better Camera. Which is boring in a way. You just don’t get any…..

Apple iPhone X: Top 5 Features, Dream Project of Apple

If you have followed Apple at all, you have probably heard the old cliche that it does things better, instead of doing them first. Nowhere…..

How AHCI or IDE Modes can affect the Drive Performance?

When you finally decide to address a huge bottleneck in your computer by upgrading to an SSD for your Boot drive. But when you finally…..

Technical Terms that you don’t have an Idea of being Misused

Using the word Bacteria to refer to a single germ, which should be bacterium instead, mixing up Discrete and discreet and saying my Facebook got…..

How Important System32 Folder is for Windows OS?

Warning! Deleting this file can cause damage to Windows or another Program. Odds are pretty high that you have seen a message like that, if…..

Samsung Galaxy Note 8 First Impression: Do Bigger Things

Last year’s Galaxy Note 7 was perhaps “the most famous Samsung smartphone in history”, for all the wrong reasons. The company kicked off its recovery…..

Top 6 Upcoming Smartphones of 2017

2017 has been an incredibly exciting year, when it comes to smartphone launches. But that doesn’t mean, it will not get even better. So, Let’s…..

Mobile Networks: Evolution from 1G to 4G Explained

Most of us uses smartphone with 3G or 4G mobile networks, well mostly 4G after Jio Storm. But do you ever think what does it…..

Lenovo K8 Note: New Killer Note is ready to Kill the Ordinary

Chinese Mobile manufacturer Lenovo made a great success with their Lenovo K series. Especially with Lenovo K3 Note, Lenovo K6 Power and Lenovo K6 Note……

Moto’s Flagship Moto Z2 Force: Review and Specifications

Motorola’s best smartphone for 2017 is a thin, classy-looking handheld with a long-lasting battery. It’s compatible with Moto Mod accessories, and sold at a fair…..

Vivo X9s Plus Overview and Specifications

Chinese Smartphone Manufacturer Vivo has making quite the market in India from two to three years. Vivo has risen to the top in trusted mobile…..

Xiaomi Redmi Note 5: Full Specifications and Leaked Details.

Chinese Smartphone Manufacturing Company Mi created many record with their Redmi Series in India. As you are aware of Xiaomi Redmi 4, which is a…..

How does Optical Character Recognition (OCR) works?

You know, it is pretty easy to take words on your computer screen and put them on a physical sheet of paper. Just click print…..

Micromax Evok Note Review: Really Invincible?

Micromax is literally failing to make their mark on smartphone market again. There was a time when Micromax did shook every smartphone companies with their…..

Wireless 802.11 ac Wave 2 Explained

It seems like the onward march of Wireless technology can not be stopped. I mean we keep flinging more and more stuff through the airwaves,…..

  • Get more stuff like this
    in your inbox

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