![thumb](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/thumb3.jpg)
Why Bootstrap?
Bootstrap has a lot of advantages over starting from scratch on your web dev projects. One of the biggest reasons is the vast number of resources available for Bootstrap, especially when compared to a lot of other frameworks and boilerplates (we'll get to those later). But beyond the resources available, there are a lot of other reasons to use Bootstrap:- It's easy to use: getting started with Bootstrap is a pretty quick and easy process. And it's flexible: you can use it with Less or CSS, and even Sass (if you download the Sass version).
- The grid: Bootstrap uses a 12-column responsive grid. It even supports nested and offset elements. The grid can be kept responsive, or you can easily change it to a fixed layout.
- Faster development: because Bootstrap has so many ready-made components and resources available, it can significantly speed up your development process.
- Base styles: Bootstrap comes with base styles for a ton of HTML elements you're going to be using anyway. It includes styles for typography, forms, images, and much more.
- Pre-styled components: Bootstrap also comes with pre-styled components for dropdowns, nav bars, alerts, and many others.
- Bundled JavaScript components: Bootstrap comes with a bunch of JavaScript components to add functionality. It makes it easy to manipulate things like modal windows, tooltips, alerts, and more. You can skip writing scripts all together.
- Excellent documentation: Bootstrap has exceptional documentation available, which is useful for both beginners and more advanced users.
- Easy integration: Bootstrap can be integrated with a variety of other frameworks and platforms, on both new sites and existing ones. You can even use just specific elements of Bootstrap alongside your existing CSS.
Getting started with Bootstrap
There are two main ways you can download Boostrap: the precompiled version or the source code version. Which one you choose depends on how you want to get started. The precompiled one is ready for drop-in usage in virtually any project, and includes compiled CSS and JS, along with compiled and minified versions of each. Glyphicon fonts are included, along with the optional Bootstrap theme. The source code version includes the precomplied CSS and JavaScript, as well as font assets. It also includes Less, JavaScript, and documentation. Basically, it's a more complete version, though the learning curve is going to be a bit higher than the precompiled version. There is also a version of Bootstrap that has been ported from Less to Sass, which is particularly useful if you want to include it in Rails, Compass, or Sass-only projects. Once you've decided which version you want to install, you'll need to install Grunt, which is the build system Bootstrap uses. You'll need to download and install node.js first, and then Grunt. From there, you'll have a variety of Grunt commands at your fingertips. Then you can start out with the basic Bootstrap HTML template, or one of their example templates. Example templates include grid layouts, jumbotron-based layouts, various navbars, and other custom components (even a blog and a sign-in page).What if I don't want a responsive site?
While Bootstrap is responsive and mobile-first right out of the box, it doesn't have to stay that way if you don't want a responsive site. All you need to do to disable it is omit the viewport meta tag in the CSS, override the width on the containers for each grid tier, remove any collapsing and expanding behavior on your navbars, and make some adjustments to the grid layouts if you're using them. You can read the specific instructions in the Getting started documentation.Bootstrap plugins, extensions, and components
Bootstrap comes with a lot of great features built in. But there are also plenty of ways to extend its functionality to meet your exact needs. Fuel UX is a set of additional JavaScript controls for your web apps. You can deploy only the controls you want to use from more than a dozen available.![fuel ux](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/fuelux.jpg)
![Jasny Bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/jasny.jpg)
![bootstrap-modal](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/modal.jpg)
![bootbox.js](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootbox.jpg)
![bootstrap image gallery](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/blueimp.jpg)
![Bootstrap Lightbox](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/lightbox.jpg)
![bootstrap form helpers](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/formhelpers.jpg)
![notifications](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/notifications.jpg)
![bootstrap growl](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstrapgrowl.jpg)
![boostrap-select](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/select.jpg)
![boostrap maxlength](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/maxlength.jpg)
![bootstrap markdown](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/markdown.jpg)
![bootstrap switch](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/switch.jpg)
![jquery file upload](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/upload.jpg)
![jqbootstrapvalidation](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/validation.jpg)
![bootstrap-wysihtml5](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/wysihtml5.jpg)
![bootstrap multiselect](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/multiselect.jpg)
![bic calendar](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bic.jpg)
![bootstrap-datetimepicker](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/datetimepicker.jpg)
![clockface](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/clockface.jpg)
![bootstrap timepicker](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/timepicker.jpg)
![color palette for bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/colorpalette.jpg)
![pick-a-color](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/pickacolor.jpg)
![bootstro](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstro.jpg)
![social buttons](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/socialbuttons.jpg)
![flippant.js](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/flippant.jpg)
![tab drop for bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/tabdrop.jpg)
![tocify](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/tocify.jpg)
![bootpag](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootpag.jpg)
![typeahead.js](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/typeahead.jpg)
![x-editable](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/xeditable.jpg)
![bootstrap tree view](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/treeview.jpg)
![tokenfield](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/tokenfield.jpg)
![star rating](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/starrating.jpg)
![yamm megamenu](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/yamm.jpg)
![summernote](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/summernote.jpg)
![knockout](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/knockout.jpg)
![gridmanager](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/gridmanager.jpg)
![slider for bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/slider.jpg)
![watable](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/watable.jpg)
![bootstrap datagrid](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/datagrid.jpg)
![pnotify](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/pnotify.jpg)
![bootstrap tour](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/tour.jpg)
![bootstrap accessibility plugin](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/accessibility.jpg)
![bootstrap video player](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/video.jpg)
![ladda ui](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/ladda.jpg)
Bootstrap themes, templates, and UI kits
You can build your own themes and templates from scratch if you choose, or check out these free and premium assets to save time. Some are meant to be used as-is, while plenty of others are meant to be a jumping off point for your own custom designs. Creative Market has more than 300 premium Bootstrap themes available.![Creative Market](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/creativemarket.jpg)
![bootstrapmade](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstrapmade.jpg)
![bootstrapbay](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstrapbay.jpg)
![gridgum](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/gridgum.jpg)
![themeforest](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/themeforest.jpg)
![wrapbootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/wrapbootstrap.jpg)
![cardeostrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/cardeostrap.jpg)
![flatstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/flatstrap.jpg)
![bootmetro](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootmetro.jpg)
![fbootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/fbootstrap.jpg)
![bootplus](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootplus.jpg)
![Get Template](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/gettemplate.jpg)
![bootstraptaste](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstraptaste.jpg)
![bootstrap zero](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/zero.jpg)
![blacktie](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/blacktie.jpg)
![startup](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/startup.jpg)
![bootswatch](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootswatch.jpg)
![start bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/start.jpg)
![joostrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/joostrap.jpg)
![Theme Armada](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/armada.jpg)
![prepbootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/prepbootstrap.jpg)
![randthemes](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/randthemes.jpg)
![roots](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/roots.jpg)
![ui bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/uibootstrap.jpg)
![the bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/thebootstrap.jpg)
![bootstrapwp](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootstrapwp.jpg)
![strappress](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/strappress.jpg)
![shoestrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/shoestrap.jpg)
![expose](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/expose.jpg)
More Bootstrap resources
Beyond basic extensions and themes, there are plenty of other Bootstrap resources out there that make working with Bootstrap easier and more enjoyable. The Bootstrap Style Guide Boilerplate helps you semi-automatically generate living style guides by linking a stylesheet and creating HTML files for each pattern or element.![style guide boilerplate](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/boilerplate.jpg)
![bootstrap magic](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/magic.jpg)
![academic](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/academic.jpg)
![wright](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/wright.jpg)
![angularstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/angularstrap.jpg)
![paintstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/paintstrap.jpg)
![durandal](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/durandal.jpg)
![lavish](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/lavish.jpg)
![layoutit](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/layoutit.jpg)
![pingendo](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/pingendo.jpg)
![bootsnip](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootsnip.jpg)
![bootply](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootply.jpg)
![dojo for bootstrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/dojo.jpg)
![bootsnip form builder](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/formbuilder.jpg)
![bootsnip button builder](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/buttonbuilder.jpg)
![ratchet](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/ratchet.jpg)
![bootbundle](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootbundle.jpg)
![bootswatchr](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/bootswatchr.jpg)
![react](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/react.jpg)
![brix.io](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/brix.jpg)
Some great Bootstrap projects
There are tons of sites out there already running on Bootstrap. The ones below show just how much diversity is possible with Bootstrap. Lexigrams![lexigrams](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/lexigrams.jpg)
![babysitmydog](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/babysitmydog.jpg)
![easygenerator](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/easygenerator.jpg)
![mobstyle](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/mobstyle.jpg)
![aef](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/aef.jpg)
![webxtrap](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/xtrap.jpg)
![paul v](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/paulv.jpg)
![high rollers](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/highrollers.jpg)
![vansh](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/vansh.jpg)
![noel hanna](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/noelhanna.jpg)
![prusik](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/prusik.jpg)
![hip advertising](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/hip.jpg)
![laundry day](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/laundryday.jpg)
![filter](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/filter.jpg)
![streamline](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/streamline.jpg)
![kitchen](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/kitchen.jpg)
![dstld](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/dstld.jpg)
![nas ferias](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/nasferias.jpg)
![vertty](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/vertty.jpg)
![montere](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/montere.jpg)
![drury buildings](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/drury.jpg)
![plaza classic film festival](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/plaza.jpg)
![1bite2go](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/1bite2go.jpg)
![riot design](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/riot.jpg)
![codiqa](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/codiqa.jpg)
![sean halpin](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/sean.jpg)
![simplebots](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/simplebots.jpg)
![magently](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/magently.jpg)
![crafting type](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/crafting.jpg)
![surreal cms](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/surreal.jpg)
![nod](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/nod.jpg)
![markt](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/markt.jpg)
![startup turkey](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/turkey.jpg)
![felix morelo](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/felix.jpg)
![the happy startup school](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/happy.jpg)
![Kontest](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/kontest.jpg)
![dutch national](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/dutch.jpg)
![dagobert renouf](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/dagobert.jpg)
![the rolling stones](https://netdna.webdesignerdepot.com/uploads6/bootstrap-guide/rollingstones.jpg)
Conclusion
Bootstrap is only one of many available frameworks for building responsive, mobile-first websites with HTML, CSS, and JavaScript. Take the time to study what Bootstrap can do (and what you feel comfortable doing with it) compared with other frameworks and choose the one that fits your specific project needs best. And don't be afraid to choose different frameworks for different projects!Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…