Bootstrap Framework

WHAT IS BOOTSTRAP FRAMEWORK?

Bootstrap is a free and open-source front-end library for designing websites & web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Bootstrap also gives you ability to create responsive layout with much less efforts. Bootstrap contains helper classes that when added to our code adds extra functionalities and helps to make responsive web pages (i.e. pages that adjust their content according to different device size).Bootstrap contains classes to make forms, tables, buttons and responsive images.

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

The latest version of the bootstrap that is v4.1 can be downloaded from getBootstrap.com .

ADVANTAGES -

1. Easy to get started

2. Responsiveness

3. Helper classes

4. Packaged JavaScript Components

5. Grid

HOW TO DOWNLOAD BOOTSTRAP -

We can download the latest version of bootstrap from https://getbootstrap.com/.Here, we can download the latest version of bootstrap that is v4.1. Just click on the download link and the zip file will get downloaded. Once the zip file is downloaded, extract the files and copy it and paste it in your project or in parallel to your HTML and CSS files.

FILE STRUCTURE -

Under bootstrap we will find 3 root folders that are-

1. CSS

In CSS we will get bootstrap.css file and one minified file that is bootstrap.min.css. This folder encapsulates all the Bootstrap CSS files. For development purposes, you may use the full CSS files (nonminified copies); however, for production deployment, it is always suggested to use the minified versions—such as bootstrap.min.css and bootstrap-theme.min.css. However, using the bootstrap theme is optional, as the original bootstrap CSS comes with colors and other styling tags.

2. FONTS

In fonts root folder we get all the fonts, glyphicons and other styling items. Glyphicons are icon fonts which we can use in our web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

3. JS

In JS we will find bootstrap.js and bootstrap.min.js. These will provide us all the classes necessary for using dynamic components. For development purpose use bootstrap.js and bootstrap.min.js for production purpose.

BASIC TEMPLATE -

<html>

<head>

</script>

</head>

<body>

</body>

</html>

BOOTSTRAP GRID SYSTEM -

Bootstrap has the capability to utilize a 12-column grid that is responsive. It also upholds offset and nested elements. The grid can be maintained in a responsive mode, or you can simply modify it to a secured layout.
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

This can be achieved by using pre-defined classes and breakpoints that are-
1. col class
2. row class

Breakpoints are –
1. For extra small devices the breakpoint is less than 768 px.
2. For small devices the breakpoint is greater than or equal to 768 px and less than 992 px.
3. For medium devices the breakpoint is greater than or equal to 992 px and less than 1200 px.

BASIC GRID STRUCTURE -

Grid structure can be accessed by using the following helper classes that are –

1. container class

2. col class

3. row class

Basic framework for program

</div>

</div>

</div>

PROGRAM FOR RESPONSIVE WEB PAGE -

</div>

</div>

</div>

</div>

</div>

</div>

</div></div>

BOOTSTRAP TABLES -

In Bootstrap we can make different tables or table structures with the help of different classes that are as followed -

1. Basic Table

2. Table with stripes

3. Table with borders

4. Responsive Table

BOOTSTRAP FORMS AND BUTTONS -

1. FORM

For making form in Bootstrap we make use of the following classes.

1. form-group class

2. form-control class

CODE

<form>

</div>

2. BUTTON

For making buttons in Bootstrap we have several classes.

1. btn btn-primary

2. btn btn-success

3. btn btn-danger ,etc

CODE

BOOTSTRAP IMAGES -

We have the following code examples along with bootstrap classes for images.

1. img-rounded

With the help of class img-rounded we can make the corners of our image rounded.

Eg- <img src=”images/abc.jpg” class=”img-rounded”/>

2. img-circle

With the help of this class we can have an image in circular shape.

Eg- <img src=”images/abc.jpg” class=”img-circle”/>

3. img-thumbnail

With the help of this class

Eg- < img src=”images/abc.jpg” class=”img-thumbnail”/>

4. img-responsive

With the help of this class our image will adjust itself according to different display

device.

Eg- <img src=”images/abc.jpg” class=”img-thumbnail”/>

Conclusion

At last I would like to conclude that one should use Bootstrap framework for web development as it makes our code more easier and effective.Bootstrap has large no. of advantages and almost supported by every browser.It also provides helper classes that is predefined code and libraries to make our work easy.With the help of Bootstrap we can make our page responsive and it also provides javascript plugins.

Digital Marketing and Advertising

Search This Blog