All right. 1
So now that we've had a little bit of a taste of what Bootstrap can do, let's dive deep into one of 2
the most powerful features of Bootstrap, which is the 12-column Layout System. 3
The 12-column system is made of three components. 4
Firstly, we need a div that has a class of "container" and this is going to be the starting point. 5
Next inside that container, we need another div which is going to be of class "row" and inside the row 6
is where we will have our items and they will be laid out using the column system. 7
So what does this look like in code? 8
Well, it's pretty simple. 9
We have a container that contains a single row and then within the row we can have as many items as 10
we like, 11
and they're laid out using the column class (col). 12
Pretty simple so far 13
and you're probably thinking, well, there's nothing very groundbreaking here. 14
Now, the interesting thing starts happening when you have multiple columns laid out inside these rows, 15
because automatically Bootstrap will try to give every column inside the row equal spacing and space 16
them across the entire width of the container. 17
So if you had a container which included a row that had one, two, three, four, five, six divs in 18
there, each with the class set as col short for column, then it will divide up the entire width by 19
six. 20
And if you had three of them then it would give each of them a third of the space. 21
Now the bootstrap container is responsive. 22
So by defining a div with the class of container, you're actually telling it to have a different size 23
on different sized screens. 24
If we had an XL or an XXL screen, so like a desktop or a TV or something, then that container is going 25
to be this size and you can see that there's several breakpoints that are responsive to the different 26
device screen sizes. 27
On mobile, maybe the container would be 540px, on an iPad, maybe it would be 720 or 960px, 28
and on desktop, maybe it would be about 1000Px. 29
You can use the dash (-) plus these different letters to specify at which point you want your container 30
to be 31
100%. 32
Container "sm" is the same as the normal container, but container "md" or medium means that on small screens 33
the container would already reach 100% of the width of the screen. 34
And again, remember, all of these sizes here are referring to the width of the viewport. 35
So only this dimension. 36
And then as we go down the line, we're starting to specify a 100% width on larger and larger screens 37
until we reach this container fluid, which basically says that on all screen sizes, we want it to 38
reach from edge to edge, which is 100% width. In most cases, 39
you will see these two being used quite frequently because the container gives a nice sort of margin 40
around the left and the right. 41
And the container fluid is when you want that edge to edge behavior. 42
The layout system gets more interesting when we start using sized columns. 43
Instead of just writing col as the class, we can actually set the class as for example, col-2 44
or col-4 45
and what this is saying is if we think of each of our rows as having 12 columns and we split them all 46
up into the 12 equal size columns like this. 47
So if you count this is actually a total of 12. 48
Then when we create a div we can specify well how many of these columns do we want to occupy? 49
In this case this div wants two of those columns and then this one wants four of them and then the final 50
one wants six. 51
Based on the classes that you choose, Bootstrap will know how much space to allocate each div on a 52
percentage basis. 53
So you could view the col-6 as 50%, and the col-2 as one-sixth of the entire width and so on and 54
so forth. 55
So you can use all of the numbers col-1 all the way up to col-12 and you can split up the proportion 56
of your screen and the content inside. 57
So maybe you would have a navigation section on the left that you only want to take up 2 out of 12 58
width and then the main content here maybe could take up 10 out of 12 of the width and so on and so 59
forth. 60
And this is a really, really easy and intuitive way of sizing your content using bootstrap, and this 61
is what the code would look like. 62
So we have three divs and we're giving this one 2 out of 12, 4 out of 12, 6 out of 12, 63
and this is the layout that we end up with 64
and we didn't have to write any CSS. 65
All we had to do was add in the pre-built layout classes. 66
Again, it's really important to know that Bootstrap has predefined breakpoints and these dimensions 67
are defined based on common screen-sizes. 68
And even though these numbers are constantly changing, generally I would say that small is for mobile 69
devices, medium is for tablets and iPads. 70
A large is for laptop, extra large is for desktop, and extra extra large is for anything crazy like 71
maybe a TV or something. 72
And extra small is for devices that are maybe longer than they are wide. 73
So maybe foldable phones and even really narrow phone screens. 74
Now, one thing I want to draw your attention to is the directionality of the signs here. 75
All of these breakpoints, which will often use, for example, col-sm-2, 76
this section refers to the screens which are greater than this dimension. 77
So that means the small breakpoint is between here and here and covers the range between 576 and 768, 78
and each of them always go up. 79
So this is important point to keep in mind when you're dealing with the bootstrap breakpoints. 80
Now, one of the great things about bootstrap breakpoints is we don't really need the media queries 81
as much because this covers pretty much a lot of the different device dimensions and we don't have to 82
manually write all the pixel sizes and add media queries into our CSS. 83
We can target the different sizes and make our website responsive by using the pre-built breakpoints. 84
Here's an example of the bootstrap breakpoints. Here 85
we're saying that on a small screen and above we want the dimension ratio to be two, four and six. 86
So this means that on desktop, on laptop, on TV, it's all going to have this size. 87
And even on mobile as well. 88
But below the size of mobile, it is not defined as having these proportions. 89
So it will default to giving each of these divs 100%. 90
And similarly, if you don't add a number here. 91
So we could for example, here it's 12 columns, 12/3, 92
so these are actually col-sm-4's. 93
But if we don't define a number, you remember that they will automatically distribute. 94
But what would it look like if we reduce the screen size to less than a mobile size? 95
Well, all of these divs will go to 100% width when the overall width is less (<) than 576, 96
then all of these items default to as if they just had a column defined. 97
So col as the class and the col class by default is going to take up 100% of the width in the 98
small-sized screen. 99
Now in a single div, you can actually also have multiple breakpoints. 100
So in this case, what it's saying is on the large devices and above, then it should take up four out 101
of 12 of the width. 102
On medium sizes and above, 103
well, because the above is already defined, 104
so then this case is only on medium devices, then it should take 8 out of 12 of the width and 105
on small devices it should take up 12 out of 12. 106
So full width. 107
Here we're simulating a large screen. 108
So maybe on a laptop or a desktop, then it's taking up 4 out of 12. 109
It's this kind of proportion. 110
And then we go over to the next size down. 111
So on an iPad, then it's going to take up 8 out of 12 of the screen. 112
And just for example sakes', let's go down even further to a mobile size where we want it to take 113
up 100% or full width of the screen. 114
Because as you imagine, when we have more screen real estate, it's easier to see things, 115
and when we're working on smaller screens, we want to make things generally a bit larger so that it's 116
easier for users to see our content. 117
In addition to having multiple breakpoints in each div, you can also mix and match the types of definitions. 118
So for example, here we've got two-sized columns, col-2 and col-4. 119
So it's always going to take up 2 out of 12, this section four out of 12 here, 120
but this last one, notice how we've just left it as the column class. 121
Now this means that it's going to automatically adjust in size in order to take up whatever proportion 122
remains. 123
Bootstrap layout is a little bit complicated when you're first working with it, and it's really important 124
that you read the docs and also have plenty of practice before things start to make more sense. 125
So in order for you to practice, I've created a website at appbrewery.github.io/bootstrap-layout, 126
and if you go to this website you'll see that I've got three exercises in total for you. 127
The idea of the exercises is that at the top there will be a demo area, which is the effect that you're 128
trying to achieve. 129
For example, in this case, we want these divs to be 50% on desktop and 100% on mobile. 130
So as I reduce the width, you'll see that it gets to a point where we reach that sm breakpoint, where it 131
goes into 100% width. 132
As you scroll down, each of the different exercises will have different proportions, 133
and what you want to do is to modify the HTML code inside here, which is responsible for the styling 134
of the area that you control, which are the divs underneath the examples, 135
and I want you to add the classes for using the 12-column layout system so that your area behaves exactly 136
the same as the top-area. 137
When you reduce the size and hit the various different breakpoints. 138
If you get stuck, be sure to check out the Layout Section of the Bootstrap Documentation and here you'll 139
see the different bootstrap breakpoints. 140
Also, you can read up more on how the columns work, how the containers work, and how the grid system 141
works. 142
Pause the video now and give this challenge a go. 143
So hopefully you've given this a go and you've managed to get everything to work correctly. 144
Let's go through the solution together. 145
The first example says it should be 50% on desktop and 100% on mobile. 146
We know that the desktop breakpoint is the XL, so we can define col-xl-6, and 6 out 147
of 12 is of course 50%. 148
Now in order to get it to be 100% on mobile, we could say col-sm-12, which is 100% and we 149
can add that to both divs. 150
Now if I go ahead and set apply changes, you can see now when I reduce the width of the window that 151
it's going to hit that breakpoint where below which it's no longer going to be 50% and it's going to 152
start taking up the full width. 153
Now, you might remember from previously we said that the bootstrap breakpoints, target sizes, this 154
particular size and above. 155
So when we define col-xl-6, we're saying anything that's above the XL breakpoint, which is greater 156
than 1200px, should be 50%. 157
You might have realized that you don't actually need to define this because everything else is going 158
to default to 100%. 159
So if I apply changes again, you can see that my purple example still behaves the same as the green 160
example, 161
and I've only changed the behavior of the XL size and above and changed its layout. 162
All right, so let's go to exercise Number 2. 163
And in this case, I haven't given you exactly what they should do or how they should behave, 164
and instead, I wanted you to simply just reduce the width of the screen to see how it changes through 165
the different sizes. 166
The first one's easy, 167
pretty much all of the larger sizes, all the way down to the large breakpoint takes up the full 168
12-width column. And you can take out a ruler if you want to measure the screen, 169
but we can see that Column 1 is roughly half of the width of the row, 170
Columns 2 and 3 are pretty much equal-size, so it's probably going to be six, three and three. 171
Let's modify this so that we target the large breakpoint first. 172
So we'll say col-lg-6 for the first column. 173
The second column is going to be called ld-3Dash, and the same for the third column. 174
So now if I click apply changes, you can see it's now taking up the same proportions, 175
but when we hit this breakpoint that's below the large breakpoint, our columns by default go to 100%, 176
whereas the example actually does something different. 177
The top column takes up 100% and the other two take up half of the width. 178
And you can see that behavior continues all the way until the very small size. 179
So that means that we've got an sm breakpoint there defined. 180
Now, once you've worked with this for a long time, you can spot each of the breakpoints pretty much 181
by eye, 182
but initially you can always just switch around, try different ones, try the sm, try the xl and see 183
which ones actually behave like the example. 184
There's nothing wrong with trial and error. When it hits the smaller screen size, 185
our Column 1 is going to take up the full width of the row and then the other two on the smaller breakpoint 186
are going to take up half of the width. 187
So col-sm-6. 188
And similarly, the third one does the same thing. 189
So let's apply the change 190
and you can see now at this breakpoint, they also behave exactly the same. 191
So now all we have left is the final one, which is just the smallest breakpoint for the columns. 192
And here what's actually happening is each of these columns are taking up ten out of 12 of the columns. 193
Now, I can spot that by eye, but also I created this exercise, so I know, 194
but if you try some different numbers, you'll probably get there as well. 195
So if we define the smallest size as column, let's just try an 8 to start with so I can show you 196
this trial and error process. 197
And we know that all the columns behave the same at that breakpoint. 198
If we click apply changes and we go here, we can see, well, eight is clearly too small. 199
So let's go up a size and let's change to 10 out of 12. 200
And once I hit apply changes, you can see we now have both sets of columns behaving exactly the same 201
at all the different breakpoints. 202
This one was a little bit harder, admittedly, and it required a little bit more thinking and probably 203
trial and error on your part, 204
but hopefully, by the end of it, you will understand a bit better about how these different breakpoints 205
work and at which points they hit. 206
So now for the final exercise and this one, we've got two columns. 207
Initially they start out in one line taking up a particular proportion and then we hit a certain breakpoint 208
and it changes the proportion. 209
Column 1 gets a little bit wider, takes up more space compared to Column 2. 210
And then if we reduce a little bit more, that changes again at the next breakpoint and then again and 211
then finally taking up full width. 212
So let's start with the largest breakpoint we know, which is the xxl, 213
let's say that col-xxl 214
and let's define as 1 out of 12, and then give the other half, 215
12 minus one is 11. 216
And now let's apply the change and you can see that is the correct proportion. 217
Again, this might require trial and error on your part. 218
Don't be too hard on yourself. 219
If you didn't manage to get it first time, I wouldn't be able to either, 220
if it was somebody else's exercise like this. 221
Now let's hit the next breakpoint just about here, and this is going to be the next breakpoint down. 222
T his is the xl. 223
We've just hit 1200. And a tip for working with responsiveness, 224
when you're wondering how do I know that it's the 1200px breakpoint that got hit? 225
If you go into the Chrome Developer Tools and click on this button to toggle the device toolbar and 226
change the dimensions to Responsive, then you can click this drag bar and look at the top here. 227
This is the important width that we need to look at. Once I expand it to 1200, you can see that jump 228
in size happen just around there. 229
So we know that the 1200 breakpoint is the xl breakpoint and you can work this out this way as well. 230
So just a tip for the future when you're working with any kind of responsiveness, 231
this is really useful to know, but most of the time I would judge responsiveness just by eye when you're 232
designing the layout to see what looks good. 233
All right, so let's hit the next breakpoint at the xl size 1200px. 234
So this is col-xl, and I reckon this is a ratio of 2 to 10. 235
So let's do col-xl-2, col-xl-10, let's apply our changes and that's pretty good. 236
So now let's keep reducing until we hit the next breakpoint and this is going to be the next level down, 237
which is large, 238
lg, and I reckon this is probably 4 to 8. 239
So col-lg-4 and the next one will be col-lg-8. 240
And notice that each of these always add up to 12 because you can see in the example layout, they're 241
only taking up one row. 242
If it didn't add up to 12, then it will go to the next row in order to take up the amount of space 243
that we specified. 244
Now we have the next breakpoint, which is the col-md, 245
and this one's easy to spot because it's half/half, so it's going to be 6, 246
And finally we have the rest are by default going to take up 100%. 247
So you could define the sm, but that's also the default behavior. 248
So you could also leave it out. 249
There you have it. 250
That's the final solution 251
code for Exercise 3 and Exercise 2 and Exercise 1. 252
Hopefully, you managed to get there in the end, even if there was a little bit of trial and error and 253
some difficulty, 254
but once you've used bootstrap layout 255
a few times 256
you'll get used to this idea. 257
And it's a really intuitive way to layout our screen, 258
and it's really easy to manipulate and to create different layout designs. 259
Now, in the next lesson, we're going to be talking through the different Bootstrap Components. 260
So for all of that and more, I'll see you there.