Coding

Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL

  • 00:00:03 Welcome to this video great to have you here in the last video of this series
  • 00:00:07 I had a look at what bootstrap is and how we add it to our project in this video
  • 00:00:12 We'll take a closer look at the bootstrap grid
  • 00:00:14 I'll explain how it works
  • 00:00:16 And how we can use it to layout our page and to make sure everything is positioned where it should be so let's start
  • 00:00:27 Now how does the bootstrap grid work?
  • 00:00:29 Behind the scenes it uses flexbox to position elements and to make sure that everything is where it should be
  • 00:00:36 You could of course use flexbox yourself and my colleague Manuel
  • 00:00:41 Actually triggered a video on flexbox that might be interesting to you feel free to check it out
  • 00:00:46 But writing flexbox on your own was not being super difficult is of course more cumbersome than
  • 00:00:51 simply adding some CSS classes to your HTML code, so let's see how the bootstrap grid works a
  • 00:00:58 Bootstrap grid is simply created with a bunch of HTML. Elements typically divs
  • 00:01:03 you have one div with the container class and
  • 00:01:07 This name is not chosen randomly it has to be named container to be understood by
  • 00:01:12 bootstrap in the container class you now create rows and columns to define your grid because that is how all
  • 00:01:20 Grids typically work, so here. We now add a number div with the row class
  • 00:01:25 You can of course add more than one row you can add as many rows as you need in this case I add two
  • 00:01:32 Now in the row class you add columns and columns are the places where you put your actual content
  • 00:01:39 Columns can be as wide as you want as you will learn and you use them to essentially create cells in your grid
  • 00:01:45 You got rows with columns. Well you got cells
  • 00:01:49 So a column is in its easiest form simply created by adding a call class in
  • 00:01:55 The grid here like this so another day for the call class and now I could name this Row one column one
  • 00:02:02 Queue well print the address of this cell so to say if I add an average column here
  • 00:02:08 I could name this Row one call to and
  • 00:02:11 In my second row let's say I also had a column there, but the only one then this would be Row two column one
  • 00:02:18 Now if we save this and we go back to the page we see that text here now
  • 00:02:23 This is a bit hard to see I want to style this and for that. I'll actually add my own classes
  • 00:02:29 I'll add my container to the container. I'll add my row to the row and
  • 00:02:36 To all the columns here, I'll add my column and for the second row I'll also add my row
  • 00:02:43 this allows me to add my own styling after the bootstrap import and
  • 00:02:47 Deliberately added to this fowl and there. I'll first of all style my container to maybe get a border of
  • 00:02:56 one pixel solid and
  • 00:02:59 green
  • 00:03:01 Then I'll style my row to get a border of the say three pixels
  • 00:03:08 solid and red and
  • 00:03:10 Then I'll add the my column style here to give this a border of three pixels
  • 00:03:17 dotted and blue and
  • 00:03:19 Let's also add a style for our body our document body and give it a margin of
  • 00:03:25 30 pixels so that our content doesn't sit right on the edges of the document we now reload this
  • 00:03:31 we actually see our grid like this and
  • 00:03:35 I should remove that white space to also see the red border I guess
  • 00:03:39 So now we can clearly see the rows and the columns with the blue dots around them
  • 00:03:44 And this is how we can position our content now interesting to see by default
  • 00:03:49 each column takes up an equal amount of space so if we resize this each column stays at 50% of the available width and
  • 00:03:57 If I shrink this down it's also the case though if I go below a certain threshold
  • 00:04:02 For very small devices here it actually breaks
  • 00:04:07 Into two lines, but I have to go really really small for that
  • 00:04:11 That is the default behavior if I just use the column class here. Just call
  • 00:04:18 Now bootstraps grid is actually more capable than that because often you don't want to have a 50-50 distribution
  • 00:04:25 You want to have one column that's one third of the available width and the other one should maybe have 2/3
  • 00:04:31 You can add with us by tweaking this column class or this call class here to get an additional
  • 00:04:38 ball piece of information so we basically changed the name
  • 00:04:42 Bootstrap defines a couple of different column class names, and this is another one we can use column four
  • 00:04:49 we can then add column eight to the second one and now you have to think of these numbers here as
  • 00:04:56 Shares of the available space they always and that's important
  • 00:05:00 They always have to add up to 12
  • 00:05:03 you got a 12 column grid by default so we can add up to 12 columns where each would then be column one or
  • 00:05:10 Nothing at all
  • 00:05:11 And it would automatically be distributed now if we set this to column four we tell bootstrap from the 12 available
  • 00:05:19 Columns this column here should take four so the width of four columns and the second one should take eight
  • 00:05:27 So together they add up to 12
  • 00:05:29 You could of course also use 6 and leave to empty at the end of the row
  • 00:05:33 But with this the full row is occupied
  • 00:05:36 but the first column will have one third of the space the second one we'll get the rest if
  • 00:05:41 We reload the page we can actually see this in action
  • 00:05:45 There we now see our first row one third of the size and the second row gets the rest
  • 00:05:52 Now sometimes you want to be even more precise than that because you wouldn't have a different layout for your small and your big devices
  • 00:05:59 Let's say for the small devices so for your mobile phones you want to stack these columns
  • 00:06:05 So they should actually become rows so to say they should not sit next to each other
  • 00:06:11 But for medium sized or larger screens you want to have them sit next to each other
  • 00:06:15 Now you can get there by tweaking this name
  • 00:06:18 Even more besides the share of the available columns
  • 00:06:22 Which should get you can add a size name so to say to define for which kind of?
  • 00:06:29 Screen sizes this should apply for example I could name this cow
  • 00:06:34 Md4 to indicate for medium sized or bigger screens this should get four of the available
  • 00:06:41 Columns I of course can now also adjust the second column here and add MD eight here now
  • 00:06:47 There are five classes available you can have medium sized screens with MD like this
  • 00:06:53 but there
  • 00:06:54 Also is large with LG for bigger screens
  • 00:06:57 XL for extra-large for very big screens and on the other side of medium you got SM for small
  • 00:07:04 tablet size and you also got X
  • 00:07:07 For extra small that would be your smaller mobile phones
  • 00:07:12 So these are the available names you can use and you can really combine all these numbers
  • 00:07:17 adding up to twelve and the size classes to control how your grid looks like if we save it like this and
  • 00:07:25 We reload the page now you see it's stacked on each other and only on bigger screens
  • 00:07:30 It sits next to each other with this four to eight distribution
  • 00:07:35 Now let's say we want to have yet another design for small screens
  • 00:07:39 Which is not the smallest class?
  • 00:07:41 Extra small would be the smallest class and there I want to have them sitting next to each other instead of stacked
  • 00:07:47 Which they are currently doing so I simply add call sm6 to both columns and now if I reload this
  • 00:07:55 We shouldn't see a difference for this screen here
  • 00:07:58 But if I shrink it
  • 00:08:00 You see now. It's evenly distributed. This is now a smaller screen and only if I go to very small screens. We stack it and
  • 00:08:09 This is the power of the bootstrap grid you can't configure a lot
  • 00:08:13 and you can really find unit to your needs with these combinations of
  • 00:08:17 shares of the available width and to different device sizes
  • 00:08:22 and as shown at the beginning you can of course also omit all of that and just
  • 00:08:27 use col to distribute the available space evenly across the
  • 00:08:31 Columns you defined
  • 00:08:33 Now if that we covered the bare basics of the grid, but we can do more
  • 00:08:37 Let's assume we have
  • 00:08:39 Column widths that don't add up to 12
  • 00:08:42 So we got some empty space maybe in row 2 if I copied add row there
  • 00:08:48 And I now give it a share maybe 4 and 4 so together
  • 00:08:53 They don't add up to 12
  • 00:08:55 You can see if I reload this and I may be named as column Q here to be correct
  • 00:09:01 Now you see we got Q columns with the same width since they both have 4
  • 00:09:07 But they're not taking the full space because they're not adding up to 12 now sometimes
  • 00:09:12 That's just layout you want because typically you're not creating tables here
  • 00:09:16 But you're creating a header a sidebar and other content so therefore you don't always want to take the fall with
  • 00:09:22 But maybe you now want to Center these two columns here so in row two you want to Center them horizontally
  • 00:09:29 Now that's easy with the bootstrap grid you can add an additional class?
  • 00:09:33 class not named two row but additional a class
  • 00:09:37 to the class list on the road div and the classes you can add here are actually inspired by the
  • 00:09:43 Flex box settings that are happening behind the scenes so if you know
  • 00:09:47 flexbox they're going to sound familiar to you if you want to Center everything you can call this
  • 00:09:53 justify
  • 00:09:54 content center with dashes between the words
  • 00:09:57 Now justify content is the flex box rule for
  • 00:10:01 Well setting where the content should be positioned and with that you see the indeed is centered now alternatives to Center are
  • 00:10:09 start that is the default though you don't need to explicitly define this this will simply move the elements to the left and
  • 00:10:17 Well you already guessed it. We also got end besides that we got two other ones though
  • 00:10:22 We also got around
  • 00:10:24 Which will?
  • 00:10:25 Put some space between the elements or put some space around them to be precise so to the left to the right and between them
  • 00:10:31 And now ever reload this you see they're kind of centered
  • 00:10:35 But these spaces also between them
  • 00:10:37 So the empty space is basically divided up equally to the left to the right and then to the left to the right of each
  • 00:10:43 column making it double the space in the middle and
  • 00:10:47 sometimes you just want to have each item be pushed to its nearest edge so column one to the left and column two to the
  • 00:10:53 Right this can be achieved by using the between name so justified content between this will put all the available space
  • 00:11:02 between the two columns like this
  • 00:11:04 this makes the
  • 00:11:06 alignment on the horizontal axis really simple
  • 00:11:08 But what about vertical alignment this has historically been very difficult in CSS well
  • 00:11:15 It's super simple with Flex box and therefore also with the bootstrap grid
  • 00:11:19 Let's give our rows some height so that we can see this
  • 00:11:23 So to the my row class which is added to each row
  • 00:11:26 I'll add a height of 300 pixels if I now reload the page you see the columns take the full available height
  • 00:11:34 Dad might be an default behavior you want
  • 00:11:37 But sometimes you just want to take the height you set for the columns or the content requires
  • 00:11:43 Now therefore you can also define how they should be positioned vertically you can again go to the row
  • 00:11:49 Let's stick to the second row and there besides justify content
  • 00:11:54 Something you can also add a line items
  • 00:11:57 something again coming from that flexbox property name that is used behind the scenes and
  • 00:12:02 There you got start for example if you take start and reload the page
  • 00:12:08 You actually see that now for the second row the columns only are as high as required by their content
  • 00:12:15 And they're then pushed to the start
  • 00:12:18 vertically off
  • 00:12:20 the row
  • 00:12:21 Now we of course also got Center and and here so let me quickly show Center
  • 00:12:26 I guess you can think what end is Center center sit
  • 00:12:30 And that's awesome because vertical centering not that easy and CSS at least in the past
  • 00:12:35 but one thing we also got is stretch, so if I set this to stretch here and
  • 00:12:42 I reload the page now
  • 00:12:43 We are back to default that is why we also actually don't have to set this
  • 00:12:47 Now sometimes you want to change the behavior
  • 00:12:49 For only one column and not for all and therefore setting this on the overall a row is the wrong place
  • 00:12:56 Well you can always go to a column. Let's say the second color here and there you can add a line
  • 00:13:03 Self-start maybe now this should get pushed up, so this second column should get pushed up well
  • 00:13:09 It's the first one stays stretched
  • 00:13:11 So let's reload and indeed that is what we see so this is how you get the full
  • 00:13:16 Flexibility over how the items are aligned and positioned in your grid which of course is an hour awesome tool in your toolbox
  • 00:13:23 Now we covered a lot and your official Docs. Which are linked below the video are a great place to dive even deeper
  • 00:13:29 But one other thing I want to show you is how?
  • 00:13:32 You can actually switch to order of columns now you should be careful with this
  • 00:13:37 It's possible as you will see in a second, but it's also confusing
  • 00:13:41 Sometimes it's really useful though sometimes you want to have a different order on your mobile phone than on your desktop device
  • 00:13:48 Let's say you can easily switch the order by adding another class to your column
  • 00:13:53 so to the first column
  • 00:13:55 Which actually right now is obviously the first element from left to right I could add order 12
  • 00:14:01 and this also goes up all the way to 12 because we got a 12 column grid and
  • 00:14:06 Then I could give my other column here order two maybe so a number smaller than 12
  • 00:14:13 Now keep in mind right now column two is on the right
  • 00:14:17 Which makes sense if we reload they switched because the order of numbers matters here
  • 00:14:23 The lower number wins and is moved to the left the bigger number is moved to the right
  • 00:14:29 Which is why the first column goes beyond the second column if we had more columns
  • 00:14:34 Then all these orders would be taken into account and it would be order respective to their order number now
  • 00:14:41 This could be used in conjunction with the device size breakpoints. We could say we only want to switch the order
  • 00:14:48 For medium sized or bigger screens so I add the MD part to the order name
  • 00:14:54 for devices smaller than that the default order from left right so as to finally the HTML code will be used if
  • 00:15:02 I now reload this
  • 00:15:05 You see it's switched because we're on a medium sized or bigger screen size here
  • 00:15:11 But if I shrink this it actually goes back to the normal
  • 00:15:16 Order because we're on a smaller than medium size screen and this of course great for a creating responsive layouts
  • 00:15:22 Where you maybe want to switch?
  • 00:15:24 Some element to the top for your mobile devices you would coach this in a mobile-first way so
  • 00:15:31 Code the order you want to have in a mobile phone
  • 00:15:33 And then you can switch the order for bigger screens as we do it here by adding the order class
  • 00:15:39 Now the last interesting thing
  • 00:15:41 I want to show you is offsetting this means pushing or moving your columns to the left by a certain column count
  • 00:15:48 Which you can kind of achieve with the?
  • 00:15:52 justified content between or around part
  • 00:15:55 But there the available space is just split up evenly now if you want to say I got two columns with with
  • 00:16:03 Ford and
  • 00:16:04 I want to move them to the left
  • 00:16:07 By let's say two columns by default and then only treat the remaining space thereafter as the well remaining space
  • 00:16:15 Then you can add the offset
  • 00:16:18
  • 00:16:19 to
  • 00:16:20 Class here, this simply tells bootstrap move this two columns to the right if we save this and reload
  • 00:16:28 You won't see anything here actually because we switched your order which will overwrite this
  • 00:16:33 But on smaller screens you see there is an empty space to the left
  • 00:16:36 And then we still get that space between setting for that
  • 00:16:40 Remaining space there after but we got them pushed in two columns
  • 00:16:44 And of course there could be any number of your choice and that can also be made responsive by adding the breakpoint names
  • 00:16:50 So we could say only push it in on medium sized devices
  • 00:16:54 So now if I reload this you see its back to the left because this is on a smaller than medium sized screen
  • 00:17:01 but if I increase this we does still don't see anything because the order thing here actually overrides this and
  • 00:17:08 To be very precise the order doesn't override that offsetting
  • 00:17:13 But keep in mind that we switch the order and we offset this first column now
  • 00:17:19 This is only the first column on a mobile device
  • 00:17:22 So we also need to add this offset code to our
  • 00:17:26 Second column or actually we only need to add there because this will be the first column due to our switched order on
  • 00:17:33 medium sized or bigger screens
  • 00:17:35 I hope this makes sense so now if you put the offset code on the second column
  • 00:17:40 And I now reload this it's pushed in but if you go to a smaller screen
  • 00:17:45 That's no longer the case and was dead you can really now fine-tune your positioning
  • 00:17:50 You've got a lot of tools for alignment
  • 00:17:52 for distributing available space for setting the available space by moving columns in like we just saw for
  • 00:18:00 Reordering your elements for defining the widths of your columns
  • 00:18:04 defining different widths for different screen sizes and the official talks hold a lot of examples on this if you want to dive deeper I
  • 00:18:12 Hope you got a first impression on how this works though and a great ways
  • 00:18:16 To always build a grid like this like we did here in the video
  • 00:18:20 Color your borders and then play around with the different classes to get a feeling for how it actually works and behaves
  • 00:18:27 I hope this was helpful and with that
  • 00:18:29 We're well prepared to style our mini project in a nice way, so let's dive deeper into this in the next videos off this serious