What is Bootstrap

DotNetKida - Sunday, May 17, 2020
Bootstrap-DotNetKida


There are several frameworks for web designers/developers 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 with an introduction to bootstrap,
Bootstrap is a free and open-source CSS framework, which is directed toward responsive web pages, and 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 them via CDN. you can always customize Bootstrap's components, fewer 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 terms of performance by reducing the loading time, as the files are on multiple servers spread across the world so whenever a 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 themes 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, if you want to get the latest news and announcements including new releases for all things related to Bootstrap then you must visit the 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 being unusable.

> You would have to do heavy customization in order to create a new different look otherwise all websites will look the 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 use 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:



Tags:

Post a Comment

2 Comments