title: Bootstrap
category: page
slug: bootstrap-css
sortorder: 0421
toc: False
sidebartitle: Bootstrap
meta: Bootstrap is a CSS framework for building website and web application user interfaces.


[Bootstrap](http://getbootstrap.com/) is a CSS framework that makes it 
easier to create website and web application user interfaces. Bootstrap 
is especially useful as a base layer of 
[CSS](/cascading-style-sheets.html) to build sites with
[responsive web design](/responsive-design.html).

<a href="http://getbootstrap.com/"><img src="/img/logos/bootstrap.png" width="100%" alt="Bootstrap logo." class="shot rnd outl"></a>


## Should I use Bootstrap 3 or 4?
[Bootstrap 3](http://getbootstrap.com/docs/3.3/) was out for almost five
years before 
[Bootstrap 4](http://blog.getbootstrap.com/2018/01/18/bootstrap-4/) was
finally released at the start of 2018. When learning Bootstrap you will
likely come across many tutorials that cover Bootstrap 3 but not version 4.

If you are completely new to Bootstrap and CSS frameworks in general then
I recommend learning Bootstrap 4. If you have already been working with
Bootstrap 3 then there is no major rush to upgrade to the latest version.
Bootstrap 4 is more complicated than version 3 because it has a lot more
features so the learning curve is a bit steeper.

[Full Stack Python](https://www.fullstackpython.com/) is actually built
with an early version of Bootstrap 3. However, this site is so heavily
customized with my own CSS that I likely will never upgrade to Bootstrap 4
because there are no new features that I feel will be useful in my
specific situation.


### Bootstrap resources
* [Getting Started with Bootstrap](https://realpython.com/blog/python/getting-started-with-bootstrap-3/)
  provides a walkthrough of a sample starter template so you can understand
  the [CSS](/cascading-style-sheets.html) classes that Bootstrap uses. There 
  is also a follow up post that shows how to 
  [create an effective sales page with Bootstrap 3](https://realpython.com/an-effective-sales-page-with-bootstrap-3/).

* [What is Bootstrap and how do I use it?](https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/)
  is an awesome tutorial that goes through many of the main Bootstrap
  elements such as icons, navigation bars and "jumbotron"-style webpages.

* [Bootstrap 5 tutorial](https://www.youtube.com/watch?v=c9B4TPnak1A) covers
  the alpha version of the fifth major revision for Bootstrap.

* [Bootstrap 4: What's New?](https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387)
  shows a slew of comparisons for how user interface elements have changed
  design over the past several Bootstrap major version iterations.

* [Tabler](https://github.com/tabler/tabler) is a free, open source admin
  theme for Bootstrap 4. You can also check out a 
  [demo of the theme](https://tabler.github.io/tabler/).

* [How to use Bootstrap 4 forms with Django](https://simpleisbetterthancomplex.com/tutorial/2018/08/13/how-to-use-bootstrap-4-forms-with-django.html)
  shows how to combine the popular 
  [django-crispy-forms](https://django-crispy-forms.readthedocs.io/en/latest/)
  library with [Django](/django.html) to create and obtain user data
  through web forms that are styled with Bootstrap 4 CSS.

* [React Bootstrap](https://react-bootstrap.github.io/) 
  ([source code](https://github.com/react-bootstrap/react-bootstrap) replaces
  the existing Bootstrap JavaScript with React components that do not
  rely on jQuery.
