Bootstrap 4's use of the CSS flexbox module greatly increases the flexibility of layout. Rows are flex containers by default so there's no longer any need to clear floats when columns in the same row are of different lengths. In this video, learn how simple it is to create equally distributed columns with the addition of a class.
- [Instructor] Use of the CSS flexbox module…is one of the most important changes in Bootstrap 4.…It not only avoids the need to clear floats,…it also offers other possibilities…such as equally distributed columns.…I've added some dummy text to each…of the six columns in the row that we created…in the previous video.…On an extra small device, the columns stretch…the full width of the row…and they're stacked vertically.…The great advantage of Bootstrap using flexbox…becomes apparent when I click…the visual media queries bar to resize…the document window for the breakpoint…for small devices.…
Even though the text is of varying lengths,…the columns are laid out two abreast.…In Bootstrap 3 which uses floats for layout,…this third column would be stuck below the second one…because it would float up into this empty space,…and the length of the first column…would prevent it from moving all the way…across to the left.…In Bootstrap 3, you would need to insert…an extra div to clear the float,…but that's not necessary in Bootstrap 4…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 46m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.