6 Reasons to Choose the Bootstrap CSS Framework
For those of you, who like me have been developing websites for few years, we tend to use similar chunks of CSS code that we copy paste from project to project.
Those of you who are more organized may have developed your own set of base CSS files to use as foundation for your projects. This method works, but let’s face it, this is not the most efficient way to do things.
Creating a CSS framework that is flexible, follows latest standards and is thoroughly tested takes days of work and could become a project in itself. Most of us don’t have time to do this.
To make matters worse, with the rise of mobile devices, making responsive websites and keeping up with the latest technologies is time consuming.
Bootstrap and CSS frameworks
Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization. Thanks to hundreds of hours spent by some developers and companies, we now have dozens of CSS Frameworks to choose from.
Among all the available CSS frameworks out there, Bootstrap is my favorite and also one of the most widely used. It’s included by default in Joomla 3, and is wildly popular amongst WordPress and Drupal users. In the last 3 years, Bootstrap’s popularity grew over 1,000% and has become by far the most popular CSS framework.
So why should you choose Bootstrap? Watch this video below, and then we’ll give you 6 great reasons to use Bootstrap:
Reason #1. Easy to get started
CSS Pre-processing is great and every front end developer should learn it. However not everyone is using it. There are still many designers creating and managing CSS files the same old way. Bootstrap offers LESS files for those of us who know how to use it, but it also provides the plain old CSS file for those don’t want to use CSS pre-processing.
To take advantage of what Bootstrap has to offer, you just have to download the files from GetBootstrap.cometBootstrap.com and after unzipping, include the files in the head of your HTML document.
This example HTML document includes the bootstrap framework with its default styling and every single components and JavaScript plugins.
Reason #2. Great grid system
Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Another useful set of features are the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones.
Reason #3. Base styling for most HTML elements
A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes.
The HTML elements for which styles are provided are:
- Typography
- Code
- Tables
- Forms
- Buttons
- Images
- Icons
Reason #4. Extensive list of components
Whether you need drop down menus, pagination or alert boxes, Bootstrap has got your covered. Styling of every single element follows a consistent theme and if you know LESS, then customizing it takes just few minutes.
Some of the components pre styled are:
- Dropdowns
- Button Groups
- Navigation Bar
- Breadcrumbs
- Labels & Badges
- Alerts
- Progress Bar
- And many others.
Reason #5. Bundled Javascript plugins
The components such as drop down menu are made interactive with the numerous JavaScript plugins bundled in the bootstrap package.
If you project requires sliders, tabs, accordions, then you no longer have to try and test numerous different plugins across the web. Adding these functionalities is just a matter of adding few lines of code and you are all set. With the customization option you can also choose only certain plugins to keep the file size to a minimum.
Reason #6. Good documentation
Not only does Bootstrap offer styling for almost every element a typical website or web application requires, it also provides a great documentation with examples and demo that only make it more easier for even someone new.
Conclusion
You might be happy with your current custom CSS library, but try using Bootstrap for one project and am sure you would ask yourself how you managed all these years without it.
If you want to learn more about Bootstrap, there are several video classes available:
I really wonder why CMS Joomla 3.1.1 does not include the latest BS release ?!?
Hi pepperstreet. It takes a little while for CMSs to catch up.
Things like WordPress, Drupal and Joomla are often behind on their jQuery version, for example.
Bootstrap is the same.
Good article, confirms my choice of framework. You say “good documentation,” but it would have been nice to have included a link to this documentation. I’ve been struggling a bit, especially with a different layout for my front page from the rest of the site, and different CSS rules between them as well. I didn’t realize there even was documentation available. Thanks for this article.
The officiale BS docs are here: [url=http://twitter.github.io/bootstrap/]http://twitter.github.io/bo…[/url]
You might also find [url=http://bootply.com]http://bootply.com[/url] useful for getting started and testing different layouts.
Thanks for the cool post! I’m curious if you could elaborate on how these Bootstrap features are implemented in Joomla v3x. For example you have this statement:
“Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones.”
How about for menu items? Do the classes also apply to those?
Thanks!
Bootstrap is too mainstream … nearly every site looks exact like the other one … to avoid this there must be so much overrides to do, in this time we can build a own CSS Framework 😀
I prefer the Foundation Framework, it has also very awesome Functions and Styles!
@patvb Thanks. Do the links along the top menu on this page help? [url=http://twitter.github.io/bootstrap/getting-started.html]http://twitter.github.io/bo…[/url]
@KaraokeAmerica Yes, you get the full power of Bootstrap with Joomla 3, although to do need to explicitly tell your template to use Bootstrap.
@WS-Theme True, although that always happens with popular software. Witness the large number of sites that use the default WP, Joomla and Drupal themes.
Regarding my first comment #1
FYI, current Joomla 3 master is getting BS 2.3.2 updates!
BOOTSTRAP v2 has more GUI / form elements.
FOUNDATION is superior in GRID features
(large and small grids let you keep horizontal positions on smaller devices. Not everything has to be top-down)
Both solutions are very similar. IMHO.
@steve, do you mean the main menu? I don’t see any links referring to the documentation, but I do appreciate you including it down here in comments.
Thanks for the article.. Let me start using the Bootstrap and also learn LESS.
How about Twitter Bootstrap? Is it like advanced features provided in that?
Your site is not only informative but also educates them have not seen in any book. Extremely happy that I found a site for learning CSS., But I see a flaw in your work. Not on your site that is ., please try
to update the site. Thanks.[url=%20http://motarjemgroup.ir]ترجمه انگلیسی به فارسی[/url]
this
site is
not only informative but also educates them
have not seen in any
book. Extremely happy
that I found a site for learning CSS.,
But I see a flaw
in your work. Not on your site that
is ., please try
to update the site. Thanks.[url=%20http://motarjemgroup.ir]ترجمه انگلیسی به فارسی[/url]
nice post
There are also a LOT more tools for Bootstrap. We created Bootply ([url=http://bootply.com]http://bootply.com[/url]). It’s a JavaScript/HTML/CSS editor that makes it easier for Bootstrap developers to included the classes and Bootstrap snippets
Thanks for sharing. Also a good article is present here
[url=http://cybarlab.com/bootstrap]http://cybarlab.com/bootstrap[/url]
Its really nice. even i have created my minor project ‘Theme using bootstrap just with HTML’. but due to lack of time i copied this theme for minor project.
show
No doubt Bootstrap Framework is the best and easiest solution for responsive HTML and its speed is awesome on all devices. Professional HTML developers always recommend this great front end framework for better and responsive HTML.
sorry for the terrible delay but I keep on hearing about bootstrap, and yet no one addresses how it’s suffering from what all frameworks suffer from: lack of tailoring. Why keep people recommend bootstrap if it comes with all the bloat? (seriously concerned.)
And i think jens meiert, brad frost, paul irish, eric meyer they have all written at length how tailoring is what we need.
I’m interested in the two atomic CSS frameworks: Tachyons and BASSCSS, and also CSS Modules. I took a look at Bootstrap and it is very, very heavy compared to the new atomic frameworks. And, difficult to refactor, just like regular cascading CSS.
Urgh, why is this article listed as being published in 2017, when clearly it has been around for four years with comments?
Thanks for the nice article. Bootstrap is indeed the most popular and widely used CSS framework. Please take a look at this related blog which features the top 5 CSS frameworks that could give a boost to your front end development.
perfect answers steve..
keep writting