Computerhelp4all logo Articles AboutTopicsQuizzesComputer Questions & AnswersComputer Terms & DefinitionsActivitiesContact

What Is Bootstrap?

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

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. It 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 a lot of 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> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <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"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Example Bootstrap Page</h1> <p>This is an example of how Bootstrap can be used. This is a blue Bootstrap container.</p> </div> <div class="container p-5 my-5 border"> <h1>White Container</h1> <p>This is a white Bootstrap container</p> </div> <div class="container p-5 my-5 bg-dark text-white"> <h1>Black Container</h1> <p>This is a black Bootstrap container</p> </div> </body> </html>

The output can be seen below:

Example Bootstrap Container

History and Versions

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 web browsers. However, Internet Explorer 11 and older versions are not supported. When in need of support for Internet Explorer 11 and older versions, 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 vanilla JavaScript instead of jQuery.


Feedback

  • Is there anything that you disagree with on this page?
  • Are there any spelling, grammatical, or punctuation errors on this page?
  • Are there any broken links or design errors on this page?

If so, it is important that you tell me as soon as possible on this page.