Creating Responsive Web Layouts with Bootstrap Components

We've got some layout issues with this, and we can make a much cleaner, much nicer layout using Bootstrap. Bootstrap is a layout system invented at Twitter, back when it was called Twitter, and Twitter employees wanted to have a way to have very basic formatting, very basic layout solved for them, so that they wouldn't have to re-solve that problem every time. They wouldn't have to re-do all that code, so they came up with a standard layout system, and it became so big at Twitter that they open-sourced it to let everybody use it, and it's been a pretty big since.

It's a very big part of the web world. Not everybody uses it, not every app uses it, but it's a very common tool for getting a pretty good layout with very minimal code, and it's very flexible, and it can scale with you. Okay, so the first step to doing it is we need to import it, so we already installed this as one of the, as part of our environment, and so we're going to import at the top "-bootstrap-components as dbc".

That's a typical name for it, "-bootstrap-components". Now, the very first thing we'll do is down here in our server code, this is very easy to forget, in the dash, we need to give it a style sheet. We need to give it one of the sets of styles, and the one I'm going to pick is, you can see, external stylesheets equals, and you give it a list, but we're only going to put one in here, dbc.themes.cosmo, and you could pick a different one, as you can see, you know, when I did that dot, there were quite a few to choose from.

Any of these all caps ones are one you could choose. All right. Now, instead of this div, we're going to, we're going to not, one of the things that Bootstrap does, typically, is it gets rid of you manually doing anything with divs, h1s, any of that.

Instead, you use their components. Okay, so, instead of html.div, we're going to change this to dbc.container, and we're still going to pass in the other things, but a container was their bootstrap version. All right.

So, I'm going to get rid of everything in here, I think. Start as fresh. What we're going to do is make rows.

We'll decide what's in our first row, what's in our second row, and that way we'll get a grid. Rows and columns, and just like container could have multiple children, just like the div could have multiple children, our row can have multiple children. I'm going to make a little list here, and in this row, I will put two columns, dbc.col. And for the first column, we'll put our pyfigure, dbc.graph, where the figure is the pyfigure, and a comma.

The second thing in our row is another column, dbc.col, and in there, we'll put the dbc.graph, our basic component for our bar figure. Let's see what happens if we put, if we save it. Let's make sure that all worked.

Everything seems to be running without errors, and here, now they're in a nice row, and you can see it actually sized them so that they would fit in here. Now, if we resize this, it changes from being in a row to being in a column. Once it decided, it couldn't fit it anymore, and it even resizes it once you're down in a column.

So it's what you call responsive. It responds to which user on which screen is looking at this. Is it a user on a big screen? Great.

Display something like this. Is it a user on a smaller screen? Great. Display it as one big column.

So we get that for free just by using Bootstrap's responsive components, the container in the row and the column. All right, let's add a second row. Same kind of thing.

In this one, we'll make another column, and in that column, we'll add a graph for our horizontal bar, and a comma. Don't forget we're in a list here, and we'll pass in our scatterplot. And there we go.

All four of them, and they respond pretty well to different sizes, and we can rearrange them within here. Right? I could say, you know what? The scatterplot should go in the very first row, and the pie figure should go third. And it's very easy to do that.

Very easy to rearrange these things. Another really neat thing we can do is we could pass a second argument into the column. First one is, what are the children? What child does the column have? But the second thing is, how big should that column be in the row? For now, let's add XL equals 6 to all of these, and I'll explain what that's doing.

All right, so remember that that XL equals 6 goes within the call to dbc.call. You can see it's before that closing parentheses, but after the call to dcc.graph, which is just this. Two arguments to the column, the thing you're putting in it, and XL equals 6, which is the size of the column. We'll play around with that.

So that gives us pretty much the same behavior as before. But, what this XL equals 6 is saying is that that's the size of the row at extra large or bigger. And we can play around with that a lot.

There are different specific screen sizes. And it means that if that rule doesn't apply, if the screen is less than extra large size, then just make it all a column. Now, we also, the reason it's 6 is that that's half of a row.

Every row in the bootstrap layout system has 12 columns. But, of course, you don't always have 12 things in the column. Typically, you have less than 12 things in a row.

So what you're really saying is, how many of the columns does it take up? And we divide each row up into 12 parts and say, how many of those 12 parts does it take up? So if we wanted this scatter figure to take up 8, well, we'd have to make this one 4. It always has to add up to 12 overall. And maybe this one we want to be just 2, and this one 10. It's probably gonna look bad.

We're just playing around with some numbers. But you notice 8 and 4 adds up to 12 for this row. And 2 and 10 add up to 12 for this.

Yeah, now we have a tiny pie chart. You can't really see it. Again, I did not promise this would look good, playing around with these numbers.

And a huge horizontal bar chart. And here we have a pretty big, two-thirds the size, 8 out of 12, scatter plot, and a much smaller one-third size, 4 out of 12, bar graph. But of course, again, if we still shrink it below that Excel size, it just switches to being vertical.

Which again, is what you'd expect on more of a tablet or phone view, where you're able to scroll down to see things. Okay. So that is how we can do this system.

We're not going to use the Bootstrap system in the next part, but it's really a fantastic way to make your, to not have to mess around with the layout yourself, and use this very flexible, yet powerful system for dictating where on the page something goes. What's the size of the row? What's the size of the column? How many rows? How many columns? It's very easily done with Bootstrap, and I recommend it. All right.

On to the next part, where we'll make our graphs within our dashboard much, much, much more powerful, flexible, and above all, interactive.