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.
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.
More information and links to download
Getting started
Examples
Themes
Bootply - Bootstrap Editor and Builder
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."
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
Easy to get started
Great grid system
Base styling for most HTML
elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
Extensive list of components
Bundled Javascript plugins
Taken from About Bootstrap Framework
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.
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.
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.
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:
CSS
Components
Javascript
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.
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
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:
React-Bootstrap - React powered Bootstrap
BootstrapVue - Vue powered Bootstrap
ng-bootstrap - Angular powered Bootstrap
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.
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
Bootstrap Home page
Vue Bootstrap
Angular Bootstrap
React Bootstrap
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
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/
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>
Related
I noticed that CSS Framework such as bootstrap and w3.css can create webpage ui widgets such as button.
But Javascript library jQuery-ui can also create button
What's the difference between these two approaches?
Bootstrap (assuming v3):
Quoting directly from bootstrap's website:
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile first projects on the web.
Which means that it provides the following features:
Is a framework which allows you to create responsive web application which work across multiple devices like PC, Tablets and Mobile.
It provides a 12 column responsive grid system which works across devices.
Supports SASS Preprocessor, which make writing CSS much more efficient with concepts like variables, mixins, inheritance etc.
Also provides a wide variety of components which makes web development a breeze. These components are built using javascript and jQuery.
A lot of themes which you can use for your web app.
jQueryUI
Quoting directly from jQueryUI:
jQuery UI is a curated set of user interface interactions, effects,
widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you
just need to add a date picker to a form control, jQuery UI is the
perfect choice.
Which basically means that it provides:
A set of widgets/components like calendar, dropdowns etc which you can use with your web application.
Interactions like drag and drop.
Themes for creating custom look and feel for your components.
To sum it up, Bootstrap is a framework for building responsive web applications whereas jQueryUI is essentially a widget/interaction library. Note that you can use jQueryUI widgets inside your Bootstrap based application.
The main difference is the author. Another difference might be what components they provide.
They're doing the same thing but just have different authors. Even though Bootstrap is a CSS framework, it's still using JavaScript for some of the interactive elements like "collapse" (which jQuery UI calls "accordion"). Bootstrap wrote their JavaScript to be compatible with jQuery.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am new to bootstrap. I have gone through What is Bootstrap? and http://getbootstrap.com/.
As per my current understanding bootstrap is actually a CSS framework which helps us to achieve responsive design that fits all devices.
Which internally means
1) Bootstrap has collection of ready-made CSS files which can apply straightaway to any web app.
2) It provides the modular way where we can structure the CSS files per device and apply it
What i did not get is this
Bootstrap is an HTML, JavaScript framework that you can use as basis
for creating web sites or web applications.
What features bootstrap provides in terms of HTML and JavaScript apart from CSS and what is the role of them in responsive designing ?
In response to your title question 'Bootstrap is css or javascript framework or both?', the latest definition of Bootstrap (taken directly from their website) is "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.". So YES it is all of those things. However, the way in which you think about this will depend on your current understanding of what a "framework" is and how HTML, CSS and JS are used to develop a complete web solution/site.
In regards to it's features, there will be no-one who can provide as much detail on this as that which can found in the Bootstraps docs. http://getbootstrap.com/.
In regard to responsiveness, this is provided by the bootstrap CSS file that you include in your HTML page. Using #media queries, some very clever people came up with an idea of using a grid system (http://getbootstrap.com/css/#grid) which, "out of the box", provides you a 12 column system that when used correctly allows you to attach pre-defined CSS classes to your HTML elements in such as way that by using percentages, can provide a fully responsive site.
The JavaScript features that can be used are as follows...
Transitions, Modal, Dropdown, Scrollspy, Tab, Alert, Collapse, Carousel etc... all of which, in them selves have nothing to do with the responsivesness.
You can use bootstrap in your html with classes and elements. For example the bootstrap.css file would have styles for tables, anchors, divs, lists etc.
These are then applied to the html elements.
There are also loads of classes that can be applied to the html elements.
Check out http://www.layoutit.com/ this will help you create a templete for your website and then apply a bootstrap.css style sheet to customize it to your liking.
The javascript part of bootstrap works in a similar way to JQuery. It provides functions for different elements of html for example the modal element of bootstrap can use functions defined in a bootstrap.js file
Bootstrap is considered a Front End Framework.
Bootstrap is a free and open-source collection of tools for creating 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. It aims to ease the development of dynamic websites and web applications.
Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.
Google made some neat presets which can be found on http://materializecss.com/
I am mainly interested in the floating button, but I would like to know about the whole if I can use it with dart. The reason I worry is, because it consists not only of CSS and fonts but also of JS - and that requires JQuery to work, which I don't think I can bring to work with dart.
Or can I simply drop JQuery next to the Materialize-folder?
As I have tried recently, yes it can be used. Any css and javascript framework can be used from dart. jQuery/Materializecss javascript API might be tricky to use so you better get familiar with js interoperability. In my experiment I ended up switching to bootstrap and a css framework on top of it (currently investigating http://fezvrasta.github.io/bootstrap-material-design/ and paper theme from bootswatch). While it might look less "material", I found the elements more mature (that is a pure personal opinion) and I have already a lot of js wrapper for jQuery and bootstrap .
I work with a JS framework than heavily leverages jEasyUI.
We have a need in various projects to combine using jEasyUI with Twitter Bootstrap theme. Another project wants to put EasyUI widgets inside Sharepoint.
This problem is not specific to just jEasyUI but rather combining "themes" from two or more frameworks.
In Sharepoint we found that both have a concept of "Tabs" therefore depending which stylesheet we included first, it screwed up the Tabs of the other product. With Bootstrap, because it styles most basic HTML elements, it interferes with how widgets are rendered from other UI frameworks as it can over-ride styles of basic elements.
I'm not really sure what the solution is. Or I'm wondering what is the best/easiest way to combine both.
It feels like I need to combine the theme from two frameworks then manually go back and fix indvidual elements to they "work together".
Has anyone faced this challenge before and is there a good or faster process for doing this?
Many thanks.
In Bootstrap you can customize your download to specific components. If you only choose the ones you need, there will be minimal style collisions.
I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.