Getting started with twitter bootstrap

Nikhil

Published on 2021-07-20 16:37:42

Bootstrap is an HTML, CSS, and JavaScript framework used to create websites that are created using a mobile-first paradigm as well as responsive web design (RWD). It uses a combination of premade CSS classes and JavaScript to make a variety of things on the web. It includes things such as a custom, responsive grid that allows websites to be viewed on any screen, a dropdown navbar that is capable of being responsive and even simple things that can be time-intensive such as premade buttons, forms, and accordions to name a few.

Bootstrap can be useful for the following reasons:

Time savings: Bootstrap features many things that are pre-built, and simply need to be called upon when writing code. This saves a considerable amount of time, and can greatly reduce the time needed to code a website.
Built with responsive web design in mind: Bootstrap allows web developers to not be concerned about creating things that will scale with the size of their screen, as Bootstrap uses a mobile-first, responsive design that allows them to build things that will work on any screen size.
Simplifies design process: Bootstrap comes prebuilt with elements that have good design practices. This can be useful for those whose web design skills are not that great, or for those who view design as a tedious task, as many of Bootstrap classes are aesthetically pleasing and great to look at.

Examples

Installation/Setup

Downloading:

Download Bootstrap directly or clone, etc. from the GitHub repository
Download your customized version of Bootstrap from official docs
Install with Bower: bower install bootstrap
Install with npm: npm install bootstrap
Install with composer: composer require twbs/bootstrap

Installing:

Within your HTML page, include Bootstrap's CSS, JS, and the dependency of jQuery (pre-version 3, at least as of the latest Bootstrap version). Please note that if you plan to utilize Bootstrap's JavaScript features, your jQuery reference must come before your bootstrap.js reference within your HTML.

You can utilize your installed Bootstrap files from the above section, or reference a CDN provided by the makers of Bootstrap (links taken from Getting Started with Bootstrap):

CSS Link:

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

JS Link

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper. Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.

Bundle

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more information about what’s included in Bootstrap, please see our contents section.

Separate

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

Try it YourSelf without seeing

Responsive meta tag

Bootstrap is developed mobile-first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

When to use Bootstrap

Bootstrap is an opinionated framework for HTML, CSS, and Javascript. It contains basic styling and functionality for what has become accepted [User Interface] elements, such as form elements, buttons, modal windows, and navigation elements. Bootstrap is a responsive web framework, meaning it is designed to adapt layout and design for screen sizes large and small, such as mobile devices, tablets, and desktop computers, all in a single code base.

One of the fundamental concepts of Bootstrap is the grid framework. By applying classes to HTML elements, it is possible to create intricate layouts using a basic grid of twelve columns. For example, a four-column layout might adapt to two columns on tablet devices and one column on mobile devices. The grid uses media queries, a CSS method for targeting specific screen sizes, to achieve this.

Bootstrap performs particularly well if:

Custom design is not a top priority
You are more comfortable editing HTML and adding classes than you are creating custom CSS
You are comfortable using a framework that will have many visual similarities to many other websites

Bootstrap can be used by those who are new to HTML, CSS, and Javascript since the documentation is excellent. However, there is a learning curve for those not entirely comfortable with the three basic technologies used by Bootstrap (HTML, CSS, and Javascript).

It is possible to purchase or download Bootstrap themes in order to alter the style or functionality of Bootstrap. It is also possible to use Bootstrap as a starting point, with customization of CSS and Javascript.

Intersting? Share it

ATutorialHub Related Guide

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2

Admin

2021-10-28 15:14:42

·

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.
Sea battle game only using HTML and CSS

Admin

2021-09-20 03:43:36

·

sea battle game where using only HTML and CSS and animation in css and html tags sea battle game

Comments (9)

Your email address will not be published. Required fields are marked*

User Comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website

Sax

2021-09-25 19:35:50

Nice website