From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Floating layout elements

Floating layout elements - Bootstrap Tutorial

From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Start my 1-month free trial

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