526

There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the official Bootstrap site, but there was only a download section and a few words after that. Nothing that explains what is it for... I just understood that it is a front-end helper. I have tried to find something by Googling, but found nothing specific. Everything I found is related to the computer science definition.

So, my questions are:

  • What is Bootstrap at all?
  • What is it used for, and how does it help front-end development?
  • I would also like some more details explaining it.
Braiam
  • 1
  • 11
  • 47
  • 78
Панайот Толев
  • 6,597
  • 5
  • 19
  • 28
  • 1
    **This question is well-answered**. Please think twice about posting new answers, especially if you intend to copy-paste your answer from elsewhere. – user229044 Sep 20 '18 at 14:53
  • 1
    With all due respect, @meagar, the question seems to be asking for a very specific and precise answer, and the accepted answer elegantly avoids it. Which means that, technically, it is not well answered. After reading each answer (including the deleted ones) I added my own which, I hope, explains what Bootstrap is, in general and easy to understand terms, largely aimed at decreasing a beginners' confusion (which is how I understand this question). – tao Dec 05 '19 at 01:46

12 Answers12

279

It is an HTML, CSS, and JavaScript open-source framework (initially created by Twitter) that you can use as a basis for creating web sites or web applications.

Update

The official bootstrap website is updated and includes a clear definition.

"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."

"Designed and built with all the love in the world by @mdo and @fat."

Supra621
  • 146
  • 3
  • 12
hutchonoid
  • 32,982
  • 15
  • 99
  • 104
  • 3
    @hutchonoid: is bootply free always ? what is the difference between Joomla and bootply ? which one is better ? – logan Nov 16 '14 at 15:08
  • 9
    @logan Joomla and Bootply are not comparable. Joomla is a content management system built on PHP and SQL while Bootply is a website that is used for experimenting with the Bootstrap framework(completely different). Think of Bootply as a JSFiddle that is specifically for Bootstrap. And yes, Bootply is always free. – APAD1 Dec 19 '14 at 18:02
  • 1
    Bootstrap is an open source product from Mark Otto and Jacob Thornton who developed it at Twitter, that`s _why_ it is named as Twitter., **In my point of view** the **Bootstrap** stands for **additional strong support** as it gives general meaning like _boot_ for legs and _strap_ for narrow piece – Akilsree1 Feb 23 '15 at 17:14
  • 17
    I think that the most relevant for answering this question would be to follow the link labelled "Examples" provided in the answer above. Copy/pasting the definition of Bootstrap from their website is obviously useless given that the user who posted the question clearly mentioned having looked at the bootstrap website. I don't think that seeing the same text from their website would make more sense simply because it's written in Bold now. – Mihaela Grigore Mar 20 '15 at 14:11
  • 2
    @Mihaela You need to take time into context here. Look at Shog9's comments in the question as to when it was re-opened. At the time of answering the site did not have the text that I have included and that is why they asked the question. I think the text is very clear now about what it is on the site. I have kept my original answer too so it is the same as before I added it. I feel that they explain it very clear on their site now so I have adjusted my answer to say that. – hutchonoid Mar 20 '15 at 15:43
  • 15
    @hutchonoid It may be a clear definition for you because you are using Bootstrap for a long time, but trust me, that definition on their website is **the reason** why I searched for this answer - I couldn't understand what it meant. So I fully agree with Mihaela on this. If I search for an answer to this question, I don't want it to be the same quote from the website, only in bigger font. Your explanation doesn't make sense because users who asked this in the past don't need the answer anymore in the present time and anyone in the present will surely first see the description from the website. – Anderson Mar 31 '15 at 10:55
  • 1
    @Anderson No problem I can see your points but for me even without using bootstrap I knew what html, css and javascript frameworks were so that would have cleared it up for me. I've changed the answer to reflect the quoted text as an update and made it smaller as I feel it does add to the answer. – hutchonoid Mar 31 '15 at 12:40
  • 2
    Maybe some mention of the projects it's suited best for? (Ie. Temporary sites, small web apps, micro sites, etc?) – Chuck Le Butt Jan 28 '16 at 14:58
96

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3.

Also it is called Front-end-framework.

Bootstrap is a free collection of tools for creating a websites and 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.

Some Reasons for programmers preferred Bootstrap Framework

  1. Easy to get started

  2. Great grid system

  3. Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)

  4. Extensive list of components

  5. Bundled Javascript plugins

Taken from About Bootstrap Framework

user229044
  • 232,980
  • 40
  • 330
  • 338
GowriShankar
  • 1,654
  • 18
  • 30
  • 16
    It strikes me more as a collection of components or widgets than a "framework". Can you clarify what exactly constitutes a "framework" and when a component library stops being a component library and starts being a "framework?" Has it something to do with the "grid system?" – KWallace Mar 30 '16 at 02:38
26

Bootstrap, as I know it, is a well defined CSS. Although using Bootstrap you could also use JavaScript, jQuery etc. But the main difference is that, using Bootstrap you can just call the class name and then you get the output on the HTML form. for eg. coloring of buttons shaping of text, using layouts. For all this you do not have to write a CSS file rather you just have to use the correct class name for shaping your HTML form.

Dmitry Pleshkov
  • 1,147
  • 1
  • 13
  • 24
Blitz
  • 317
  • 3
  • 2
  • 10
    Actually, bootstrap is a lot more than just a 'css file'. – Recipe Aug 18 '14 at 09:19
  • 1
    i agree with @Recipe its not just about the CSS file – Sujay sreedhar Mar 27 '15 at 16:37
  • 1
    I personally agree with Blitz. Not in that he has a comprehensive list of features of Bootstrap, but that in my complex shop(s), I mostly use purist coding, and use Bootstrap for its most basic css features. That's sort of the core of its strengths. – Suamere May 01 '15 at 15:32
  • 1
    This is a very poor reply that, badly, explains what CSS (and only CSS) does. Downvoted. It basically simply explains that you can use CSS and then reference the classes to modify your UI. Nothing whatsoever to do with bootstrap itself over other packaged resources. – RichieHH Apr 28 '17 at 22:47
23

In simpler words, you can understand Bootstrap as a front-end web framework that was created by Twitter for faster creation of device responsive web applications. Bootstrap can also be understood mostly as a collection of CSS classes that are defined in it which can simply be used directly. It makes use of CSS, javascript, jQuery etc. in the background to create the style, effects, and actions for Bootstrap elements.

You might know that we use CSS for styling webpage elements and create classes and assign classes to webpage elements to apply the style to them. Bootstrap here makes the designing simpler since we only have to include Bootstrap files and mention Bootstrap's predefined class names for our webpage elements and they will be styled automatically through Bootstrap. Through this, we get rid of writing our own CSS classes to style webpage elements. Most importantly Bootstrap is designed in such a way that makes your website device responsive and that is the main purpose of it. Other alternates for Bootstrap could be - Foundation, Materialize etc. frameworks.

Bootstrap makes you free from writing lots of CSS code and it also saves your time that you spend on designing the web pages.

gauravparmar
  • 884
  • 1
  • 9
  • 23
19

Bootstrap is an open-source CSS, JavaScript framework that was originally developed for twitter application by twitter's team of designers and developers. Then they released it for open-source. Being a longtime user of twitter bootstrap I find that its one of the best for designing mobile ready responsive websites. Many CSS and Javascript plugins are available for designing your website in no time. It's kind of rapid template design framework. Some people complain that the bootstrap CSS files are heavy and take time to load but these claims are made by lazy people. You don't have to keep the complete bootstrap.css in your website. You always have the option to remove the styles for components that you do not need for your website. For example, if you are only using basic components like forms and buttons then you can remove other components like accordions etc from the main CSS file. To start dabbling in bootstrap you can download the basic templates and components from getbootstrap site and let the magic happen.

mukesh krishnan
  • 353
  • 1
  • 6
  • 20
valueweaver
  • 483
  • 5
  • 11
7

Disclaimer: I have used bootstrap in the past, but I never really appreciated what it actually is before, this description comes from me coming to my own definition, today. And I know that bootstrap v4 is out, but I found the bootstrap v3 documentation to be much clearer, so I used that. The library is not going to fundamentally change what it provides.

Briefly

Bootstrap is a collection of CSS and javascript files that provides some nice-looking default styling for standard html elements, and a few common web content objects that are not standard html elements.

To make an analogy, it's kind of like applying a theme in powerpoint, but for your website: it makes things look pretty nice without too much initial effort.

What does it consist of?

The official v3 documentation breaks it up into three sections:

These roughly correspond to the three main things that Bootstrap provides:

  • Plain CSS files that style standard html elements. So, Bootstrap makes your standard elements pretty-looking. e.g. html: <input class="btn btn-default" type="button" value="Input">Click me</button>
  • CSS files that use styling on standard html elements to make them into something that is not a standard html element but is a standard Bootstrap element (e.g. https://getbootstrap.com/docs/3.3/components/#progress). In this way Bootstrap extends the list of "standard" web elements in a visually consistent way. e.g. html: <span class="glyphicon glyphicon-align-left"></span>
  • The CSS classes are designed with jQuery in mind. Internally, Bootstrap uses jQuery selectors to modify the styles on the fly and interact with the DOM, and thus provides the user the same capability. I believe this requires more explanation, so...

Using Javascript/jQuery

Bootstrap extends jQuery quite a bit. If we look at the source code, we can see that it uses jQuery to do things like: set up listeners for keydown event to interact with dropdowns. It does all of this jQuery setup when you import it in your <script> tag, so you need to make sure jQuery is loaded before Bootstrap is.

Additionally, it ties the javascript to the DOM more tightly than plain jQuery, providing a javascript class interface. e.g. toggle a button programmatically. Remember that CSS just defines how a thing looks, so the major job of these operations will tend to be to modify which CSS classes apply to the element at that moment in time. This kind of change, based on user input, can't be done with plain CSS.

There are other standard interactions with a user that we denizens of the internet are used to that are not covered by CSS. Like, clicking a link that scrolls you down a page instead of changing pages. One of the things that Bootstrap gives you is an easy way to implement this behaviour on your own website.

Standards

I have mentioned the word "standard" a lot here, and for good reason. I think the best thing that Bootstrap provides is a set of good-looking standards. You're free to modify the default theme as much as you want, but it's a better baseline than raw html, css and js. And this is why it's called "framework".

Different web browsers have different default styles and can act differently, and need different CSS prefixes and things like that. A major benefit of Bootstrap is that it is much more reliable than writing all that cross-browser stuff yourself (you will still have problems, I'm sure, but it's easier).

I think that Bootstrap was preferred more when gulp and babel weren't as popular. Looking at Bootstrap it seems to come from a time before everyone compiled their javascript. It's still relevant, but you can get some of the benefits from other sources now.

More recent versions of CSS have allowed you to define transitions between these static lists as they change. The original version of Bootstrap actually predates wide-spread adoption of this capability in browsers, so they still have their own animation classes. There are a few bits of Bootstrap that are like this: that other stuff has come up around it and makes it look a bit redundant.

Multihunter
  • 5,520
  • 2
  • 25
  • 38
4

Bootstrap is an HTML, CSS, JS framework with many components that let you create beautiful and modern web sites or web applications very fast.

The following websites contain examples, elements and reusable components that you can integrate into your project using bootstrap framework

bootsnipp.com

startbootstrap.com

bootdey.com

Dey
  • 842
  • 9
  • 21
3

By today's standards and web terminology, I'd say Bootstrap is actually not a framework, although that's what their website claims. Most developers consider Angular, Vue and React frameworks, while Bootstrap is commonly referred to as a "library".

But, to be exact and correct, Bootstrap is an open-source, mobile-first collection of CSS, JavaScript and HTML design utilities aimed at providing means to develop commonly used web elements considerably faster (and smarter) than having to code them from scratch.

A few core principles which contributed to Bootstrap's success:

  • it's reusable
  • it's flexible (i.e: allows custom grid systems, changing responsiveness breakpoints, column gutter sizes or state colors with ease; as a rule of thumb, most settings are controlled by global variables)
  • it's intuitive
  • it's modular (both JavaScript and (S)CSS use a modular approach; one can easily find tutorials on making custom Bootstrap builds, to include only the parts they need)
  • has above average cross-browser compatibility
  • web accessibility out of the box (screenreader ready)
  • it's fairly well documented

It contains design templates and functionality for: layout, typography, forms, navigation, menus (including dropdowns), buttons, panels, badges, modals, alerts, tabs, collapsible, accordions, carousels, lists, tables, pagination, media utilities (including embeds, images and image replacement), responsiveness utilities, color-based utilities (primary, secondary, danger, warning, info, light, dark, muted, white), other utilities (position, margin, padding, sizing, spacing, alignment, visibility), scrollspy, affix, tooltips, popovers.

By default it relies on jQuery, but you'll find jQuery free variants powered by each of the modern popular progressive JavaScript frameworks:

Working with Bootstrap relies heavily on applying certain classes (or, depending on JS framework: directives, methods or attributes/props) and on using particular markup structures.

Documentation typically contains generic examples which can be easily copy-pasted and used as starter templates.

Another advantage of developing with Bootstrap is its vibrant community, translated into an abundance of themes, templates and plugins available for it, most of which are open-source (i.e: calendars, date/time-pickers, plugins for tabular content management, as well as libraries/component collections built on top of Bootstrap, such as MDB, portfolio templates, admin templates, etc...)

Last, but not least, Bootstrap has been well maintained over the years, which makes it a solid choice for production-ready applications/websites.

Hiws
  • 8,230
  • 1
  • 19
  • 36
tao
  • 82,996
  • 16
  • 114
  • 150
  • Good answer. If possible, please, add additional selected links to the so mentioned technologies in your answer (like React, Vue, Angular, framework, library, etc). Just as an additional guidance for the newcomers and newbies. – carloswm85 Oct 05 '20 at 16:21
2

Bootstrap the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. It is very popular open-source toolkit.Very easy for styling using it. latest version is bootstrap 4.bootstrap featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. In now they specify their toolkit for React Js,Angular & Vue

Anushka Praveen
  • 109
  • 2
  • 13
1

Bootstrap is the world’s most popular and widely used open-source framework for developing with HTML, CSS, and JS. It is a front-end framework of HTML. Bootstrap helps in building responsive websites or web applications and a 12-column grid system that helps dynamically adjust the website to a suitable screen resolution. The current version of bootstrap is 4.3.1 and the bootstrap team has also officially announced Bootstrap 5 version and changes like removing jquery from bootstrap. Some of the crucial reasons why the bootstrap framework is most preferable are

  • It is easy to use

  • Bootstrap has a big community support

  • Customizations can be done easily

  • It increases the development speed

  • Responsiveness

    For more details, you can check the official website: https://getbootstrap.com/

It is advisable to use the Bootstrap 5 Admin Templates while working on your bootstrap-based projects.

Source: https://vmokshagroup.com/blog/bootstrap-advantages/

Saanvi Sen
  • 35
  • 6
1

Bootstrap is an open-source, mobile-first collection of CSS, JavaScript and HTML design utilities aimed at providing means to develop commonly used web elements considerably faster (and smarter) than having to code them from scratch.

A few core principles which contributed to Bootstrap's success:

it's reusable it's flexible (i.e: allows custom grid systems, changing responsiveness breakpoints, column gutter sizes or state colors with ease; as a rule of thumb, most settings are controlled by global variables) it's intuitive it's modular (both JavaScript and (S)CSS use a modular approach; one can easily find tutorials on making custom Bootstrap builds, to include only the parts they need) has above average cross-browser compatibility web accessibility out of the box (screenreader ready) it's fairly well documented

  • If you cite content, please always include the source. See [How to reference material written by others](https://stackoverflow.com/help/referencing). – Adriaan Jun 14 '22 at 13:49
-1

Bootstrap is Open source HTML Framework. which compatible at almost every Browser. Basically Large Screen Browser width is >992px and extra Large 1200px. so by using Bootstrap defined classes we can adjust screen resolution for displaying contents at every screen from small mobiles to Larger Screen. I tried to explain very short. for Example :

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Rohan Sable
  • 25
  • 6