Learn how to control where elements are positioned in Bootstrap using traditional CSS display properties that have been translated into Bootstrap classes.
- There are other ways besides the grid to control how elements are positioned within Bootstrap, so let's take a look at what they are, and how to use them. Now first of all is position. Now if you're familiar with CSS these work exactly like the regular CSS position property, there are three options you can use, you can make an element fixed to the top of the screen which means it would get removed from the flow of the document, and put essentially at the top of the window or at the top of the view port and of course fixed bottom would place the element at the bottom.
There's another one called sticky top, and that one will allow you to have an element stick to the top of the view port or the screen as you scroll an element. So that's a really useful effect but it is not well supported in a lot of browsers, so that would be especially Internet Explorer, and Edge, and it's only supported in the latest versions of Chrome as well, so it's a little bit iffy in terms of support, but hopefully more browsers will implement this soon.
There is also display properties and they mimic what is possible with CSS as well, and it also opens up bootstrap to flexbox classes that can help with layout. Now to use the display class, you use the d keyword, and then the type of display property you want to use so they're just like the CSS properties so there's block, inline, inline block, or the flex option. Now the flex option is very complicated we'll cover the basic container in this video and explore it a bit further in the next.
But let's go ahead and introduce the main flex container. The way that it works is something like this, you start with the keyword d, and then you can optionally add one of the break points so that the element will display as a flex element only at certain break points that makes it super flexible, and then if you want to you can use optionally a keyword called inline by default, flex elements are block level elements and so if you want to make it optionally an inline element, you can add this inline keyword.
Of course you also have to have the keyword flex so the most simple way of using this is just by saying d-flex, it'll be a block element without any break points, and if you want to you can add a break point or the keyword inline. So let's take a look at how these work. So what I have here is a sample file that has a few elements right here at the top, the elements are in a class of item right here and this class I have styled with some backgrounds text align center, and some sizes, and I'm going to add the different classes for display and position here, the reason I'm not using the bootstrap classes for alignment or background is I want these to be pretty clean right here I do have a bg info, which is making the background of this blue, which will make sense in a minute.
And then I have this other thing, with a bg danger background which is all this text, so that's going to explain what happens when I scroll, and when the positioning property changes the elements. So let's go ahead and start with the position properties, and we have three of them fixed top, fixed bottom and sticky tops so if we take this element right here and we say fixed-bottom and we save it, notice that it moves to the bottom, but it actually took that element out of where it would normally sit, and it put it all the way to the bottom essentially to the bottom of the view port the full width, and notice that it's not aligned to the container anymore, essentially it took it out of where it was, and it placed it down here, this is similar to the CSS display property, of course if you say fixed-top, it would do the same thing but at the top, and notice that it's actually covering up some of the text now, so you would have to adjust your CSS to take into account the extra room, that this will be taking on screen.
Now there's another one that you can use and it's called sticky top, and that one works in a slightly different way. Notice that it is aligned to the container and I don't really have to do anything to my CSS because my title and this text is here again before it was sort of behind that blue area what's happening is as I scroll that element that element will remain in place once it reaches the top of the screen, you can't tell because right now this element is at the top so, let's go ahead and just move it so we'll grab this whole thing and we'll sort of move it before the second paragraph and notice that there it is, right? But if I scroll, as I scroll it'll stick to the top, and everything else will keep scrolling, let's make this window smaller, cause you can see it a little bit better so as I get to that top position it'll stick there, and it will keep on scrolling with the rest, if I scroll back it'll go back to where it use to be.
And that's actually pretty cool except that it is not well supported by a lot of browsers, mainly Internet Explorer and Edge, and even with Chrome it only works in the very latest version of Chrome, something that will be useful maybe a little bit later, but it's one of the options that you have right now. Right we also have the display property, and those are just like with CSS we have block, inline, and inline block. So if we, let's go ahead and move this back, I'll just undo a few times, just to put it back at the top, and then instead of sticky-top here, I'm going to change this class to d-block, so now this will be a block element it was already a block element so it's not going to look like it did anything, let's go ahead and change it to d-inline, and what it does is actually make the element itself an inline element, you can't really see anything special because this is a headline and following thing being a headline means that this is not really going to be sort of embedded into the flow of the document, I could do that with these elements as well so let's go ahead and delete this and just do item, and then do d-inline here and notice that now that element would actually shift, so let's do that to all of them.
So now, because these are all d inline, they are coming in as inline element but we lose the ability to specify on width and height so you also have inline block here and with inline block you regain the ability to specify width and height, so if we make all these inline blocks you'll see that they look like this. So if an element is a block element than you can convert it to an inline or an inline block element, and of course if this was a span, or any other sort of inline element, you can convert it to a block with this utility classes.
Now there is another one called flex, so let's go ahead and undo all these right here, we're back to this and let's make this smaller. And I would have to put this on the container so the flex, or the d-flex works on the container and so what it's actually doing, and let's make this window bigger again, so notice that there is still a little bit of blue, right now, so d-flex just allows you to take that element and convert the inside elements to be controlled with flex classes there are a ton of options for flex classes but we're not going to cover all of them just the basic flex container which again goes sort of on the container of the items that you want to play with and the options here are to include a break point so you can say I want this to only happen at the sm break point, and so now notice that if I go smaller here before the sm break point it's going to look just like it did before but as soon as I get to the sm break point these items are now being controlled by flex So of course anything else here would work so md, lg, any one of the others so now because it's md, it's going to wait until it get's to the medium break point right here and then it is controlled as a flexed item or these items are controlled by flex.
Now the other option, there's another sort of option and that is to add the keyword inline here. Notice that right now, this element, the container is actually a block element, you can tell that because it goes sort of the full width of the container, right? Which has that 15 pixel margin, cause it's a regular container, however if I save this, you'll notice that that will go away because the element itself would become an inline element, whose individual items are being controlled by flex, so you do that by just adding this inline keyword right here.
Now as I mentioned, the display flex property is very complicated so let's go ahead and take a look at some of the options in the next video.
- Reviewing the core changes in Bootstrap 4
- Using display properties
- Reviewing flexbox container options
- Designing basic cards
- Using badges
- Upgrading from Bootstrap 3
- Migrating to the new grid
- Upgrading navs
- Learning about table and form changes
- Reviewing dropdown changes
- Changing a carousel