What is Bootstrap

Bootstrap-DotNetKida


There are several framework for web designer/ developer to design elegant web pages. Among them Bootstrap still remains the favorite.
Now various frameworks compete for the endearment of web designers/ developers.

What is Bootstrap and Why Bootstrap?

Let’s start from introduction to bootstrap,
Bootstrap is a free and open-source CSS framework, which is directed for responsive web pages, mobile-first front-end web development. 
It contains CSS and JavaScript based design templates for typography, forms, buttons, navigation, and other interface components.It was initially released on 19 August 2011, and it's Written in: HTML, Cascading Style Sheets, Less (v3), Sass (v4), JavaScript
Bootstrap is also used by many popular websites like Spotify, Udemy etc.

Bootstrap is compatible with almost all browsers (Chrome, Firefox,Safari, Microsoft Edge, Internet Explorer and Opera)

How to use Bootstrap?

All we need to do is visit http://getbootstrap.com/customize/, choose the plugins you need and click download or you can use via CDN. you can always customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
You can use Bootstrap in your project via CDN (Content Delivery Network), 


Whereas CDN offers benefits in term of performance by reducing the loading time, as the files are on multiple servers spread across the world so whenever user requests the file it will be served from the nearest one to them. 
We will be using the CDN links in example, Let's see:


<!DOCTYPE html>
<html lang="en">
<head>
<title>First Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Bootstrap with DotNetKida</h1>
<p>Check responsiveness of the page by resize your window!!</p>
</div>
 <div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Coulmn-1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut sit amet fermentum nunc. Phasellus viverra ullamcorper tortor. Etiam varius orci non porta egestas. </p>
</div>
<div class="col-sm-4">
<h2>Column-2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet fermentum nunc. Phasellus viverra ullamcorper tortor. Etiam varius orci non porta egestas. </p>
</div>
<div class="col-sm-4">
<h2>Column-3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet fermentum nunc. Phasellus viverra ullamcorper tortor. Etiam varius orci non porta egestas. </p>
</div>
</div>
</div>
</body>
</html>



Bootstrap is very easy to use just need to add some classes to the HTML elements and all gets done. 

You can always get some free theme designed in Bootstrap, you just need to visit Bootswatch : Free themes for Bootstrap and choose your theme,
it also provides some official Bootstrap themes you can find them here official Bootstrap Themes marketplace, along with if you want to get latest News and announcements including new releases for all things related to Bootstrap then you must visit to Official blog for the Bootstrap framework.


Pros  Bootstrap-Pros-and-cons-Dotnetkida Cons


Pros

> Less Cross browser bugs : supports almost all browsers (Chrome, Firefox,Safari, Microsoft Edge, Internet Explorer and Opera)

> Customize-able and Lightweight : Whether we use it via CDN or download in your project, it optimizes resources and allows us to make our design changes.

Lots of free and professional templates access as we mentioned above.

Responsive design made easy



Cons

jQuery is a JavaScript library and that leads to most of the plugins unusable.

You would have to do heavy customization in order to create a new different look otherwise all website will look same.

It could be really hard if you need to design apart from bootstrap predefined layout, so it can take time to modify or rewrite the CSS code.


FAQs ( Frequently asked questions):

Q. Is bootstrap free?
A. Yes, Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Q. What is the current bootstrap latest version?
A. The current version of bootstrap is 4.5.0 .

Q. Who uses bootstrap?
A. 4k+ companies reportedly use Bootstrap in their tech stacks, including Spotify, Twitter etc.

Q. Do professional Web developers use bootstrap?
A. Yes, Front-end Developers uses Bootstrap to beautify the web pages. It helps to create the UI of an application pretty easily.

Q. Can I learn bootstrap without CSS?
A. Nope, you should have basic knowledge of HTML and CSS.

Q. Should I learn bootstrap or CSS?
A. It depends, indeed it saves a lot of time, personally I recommend using a CSS framework, like Bootstrap, for common UI components like grid or layout etc. If you are doing some specific, custom implementations, write your own CSS. 

Q. Is bootstrap difficult to learn?
A. Well, it depends from one person to another. As mentioned earlier you need some basic knowledge of HTML and CSS,However people with minimal or zero knowledge of CSS, HTML, and JavaScript will find it really hard to learn Bootstrap otherwise it will take a few weeks.

References:



Post a Comment

2 Comments