What Is Bootstrap?

Date First Published: 9th October 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 6/10

CONTENTS

Benefits Of Using Bootstrap
Example Of Bootstrap
History

Learn more about what Bootstrap is in this article.

Not to be confused with the Bootstrap Protocol.

Bootstrap is an open-source CSS framework used in frontend web development to create responsive and mobile-friendly websites. It consists of a wide collection of responsive HTML and CSS design templates for buttons, cards, alert boxes, tables, columns, typography, input fields, dropdown menus, and more.

Benefits Of Using Bootstrap

Bootstrap is designed to simplify the process of creating CSS elements as all developers need to do is add the link to the Bootstrap stylesheet in the head of the HTML document and specify the correct name of the Bootstrap div class. The elements can then be customised by adding internal CSS rules which will overwrite the ones in the external Bootstrap stylesheet. Some Bootstrap templates also include JavaScript code so that specific functions can be performed, such as making the design responsive.

In addition to responsive web design, another advantage of using Bootstrap is that most users have already downloaded and cached the Bootstrap stylesheet from another website. When visiting websites, the Bootstrap stylesheet will already be cached, speeding up the loading time of the page and reducing the number of requests to the web server. It may be cached by a CDN, such as Cloudflare or stored in the local browser cache.

Example Of Bootstrap

An example of how Bootstrap can be used can be seen below:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Example</title>

</head>

<body>

<h1>Example Bootstrap Page</h1>

<p>This is an example of how Bootstrap can be used. This is a blue Bootstrap container.</p>

</div>

<h1>White Container</h1>

<p>This is a white Bootstrap container</p>

</div>

<h1>Black Container</h1>

<p>This is a black Bootstrap container</p>

</div>

</body>

</html>

The output can be seen in the screenshot below:

History

Bootstrap was originally released on 19th August 2011 by Mark Otto and Jacob Thornton and is now maintained by a small group of developers on GitHub. It was originally called Twitter Blueprint but was later renamed. Bootstrap 5, released in 2021 is the latest version of Bootstrap which is supported by all modern web browsers. However, Internet Explorer 11 and older versions are not supported.

When support for Internet Explorer 11 and older versions is needed, Bootstrap 3 and 4 will need to be used. These versions are still supported by the team for bug fixes and it is safe to continue using them. However, no new features will be added to them in the future. The main differences between Bootstrap 5 and Bootstrap 3 and 4 are that Bootstrap 5 uses pure JavaScript instead of jQuery.

Use this to link to this article:

HTML: <a href="https://computerhelp4all.com/articles/what-is-bootstrap.html">Computerhelp4all</a>

Plain link: https://computerhelp4all.com/articles/what-is-bootstrap.html