From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Floating layout elements - Bootstrap Tutorial
From the course: Bootstrap 4 Layouts: Responsive Single-Page Design
Floating layout elements
- [Instructor] Alright so it's time to do another fun layout. This time I'm gonna do something called a floater. I've got this really cute image of this monster and it's in a parachute so I'm gonna take this text right here and put it in a horizontal bar and have this monster at a certain size, sort of, float on top of that layout. So it's gonna involve just some regular traditional CSS and I'm gonna get started by adding a section class, right here. So we're actually gonna add a new one and then put these things inside that. And just like we've done before, we're gonna create a layout class here. So class layout-floater and I'm gonna put a container class in there to limit the width of the content in here. And I'm gonna add some padding to the top and bottom of it. So all we have now is really not much change visually yet but you can see that the container here has taken over. Same thing over here. There's a little bit of spacing also above and below that wasn't there before. So…
Contents
-
-
-
-
Using a multicolumn format17m 26s
-
(Locked)
Working with the media component10m 2s
-
(Locked)
Creating a grid of photos7m 10s
-
(Locked)
Working with carousels11m 49s
-
(Locked)
Nesting a layout14m 6s
-
(Locked)
Creating an icon layout9m 14s
-
(Locked)
Floating layout elements11m 1s
-
(Locked)
Using the card layout classes9m 24s
-
-
-
-