Horizontal and Vertical Alignment Classes in Bootstrap - English

Play
Current Time 0:00
/
Duration Time 0:00
Remaining Time -0:00
Loaded: 0%
Progress: 0%
0:00
Fullscreen
00:00
Mute

1264 visits

  1. Instruction Sheet
  2. Installation Sheet
  3. Report Missing Component
  4. Post your Question on the Forum
Outline:
Horizontal and Vertical Alignment Classes in Bootstrap

Different types of justify-content classes for horizontal alignment
Add .justify-content-between class to the HTML file
Observe the horizontal alignment of the columns on the web browser
Different types of align-items classes for vertical alignment
Add .align-items-end class to the HTML file
Observe the vertical alignment of the columns on the web browser
How to apply different vertical alignment for different columns?
Different types of align-self classes for vertical alignment
Add .align-items-end and .align-items-start classes to the HTML file
Observe different vertical alignment of the columns on the web browser
Width:956 Height:714
Duration:00:09:42 Size:4.7 MB

Show video info

Pre-requisite

Margin and Padding Classes in Bootstrap

  Assignment

Code files

  • Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Code-Files/
  • Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Code-Files/Mystyle.css
  • Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Code-Files/Mypage.html
  • Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Code-Files/Mypage.txt

Script

Slides

  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap.pdf
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Horizontal-and-Vertical-Alignment-Classes-in-Bootstrap.tex
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Image1.png
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Image2.png
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Image3.png
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Image4.png
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/Image5.png
  • HorizoHorizontal-and-Vertical-Alignment-Classes-in-Bootstrap-Slide/spoken.png