7. Bootstrap


Lessons

  1. What is Bootstrap?

    programmingbootstraphtmlcssjavascript

    Now that we know what dev tools are and what the different windows can be used for, let’s put it to good use. So let’s bring in more code to look at and learn how to build modern, responsive websites in a very practical way.

  2. Bootstrap: The Basics

    programmingbootstraphtmlcssjavascript

    After importing Bootstrap succesfuly, we can get to building a layout! Let’s see how the system works first, so that we don’t get headaches of “what goes where” later.

  3. Bootstrap: Components

    programmingbootstraphtmlcssjavascript

    Bootstrap offers way more, than just an efficient way to position your content. It offers a pretty big list of premade components, which you have to only copy over and configure.

  4. Bootstrap: Navigation

    programmingbootstraphtmlcssjavascript

    Cool, so we took a look at creating a simple page layout previously with Bootstrap components, using the Bootstrap grid. Websites usually have more than one page nowadays (shush SPA devs).

  5. Bootstrap: More Components!

    programmingbootstraphtmlcssjavascript

    Let’s look at more components, so that you feel more comfortable using them in your projects. Instead of going through each aspect and taking the fun out of exploring it for yourself, I will just mention the components here, based on simplicity and potential of use in the blog example we already started.

  6. Responsive Columns

    programmingbootstraphtmlcssjavascript

    Previously we looked at the most basic usage of columns within rows. Bootstrap allows you to individually control how each column behaves when it has to respond to different screen sizes.

  7. Other Frontend Frameworks

    programmingbootstraphtmlcssjavascript

    Of course Bootstrap is not the only framework out there and some people might not like it. I think it’s fine, I’ve been using it for a few years and see no problems with it thus far. For the sake of context, let’s take a look at similiar frontend frameworks. Also, what does “frontend” even mean?

  8. So What's Popper and jQuery?

    programmingbootstraphtmlcssjavascript

    We’ve covered the majority of Bootstrap in big steps by now. We haven’t yet looked at the other 2 script imports, namely “Popper” and “jQuery”, what are those?