Bootstrap Align two divs vertically
If you are using the Bootstrap framework while working on an HTML webpage and want to align two div elements vertically, then the below code will help you achieve it.
Bootstarp HTML Code Snippet:<div class="container" id="container_div">
<div class="row v-align" id="outer_div">
<div class="col-xs-4" id="div_1">This is Div 1</div>
<div class="col-xs-4" id="div_2">This is Div 2</div>
</div>
</div>
CSS class for vertical alignment of two div's:
.v-align {
display: inline-block;
float: none;
vertical-align: middle;
}
Comments:
- Short and sweet example.
AnkitJ 11 Nov 2020 21:20:11 GMT
- Further comments disabled!
More Posts related to Bootstrap,
- How to disable button in Bootstrap
- Bootstrap tooltip not working
- Bootstrap Button Colors Classes
- Rounded Images in Bootstrap framework
- Right Align Text in Bootstrap framework
- How to add hint text in bootstrap input text field and text area
- Create Bootstrap carousel slider with Text
- Bootstrap Nav Menu Dropdown on hover
- [Solved] Bootstrap tooltip not working
- Align left align text in Bootstrap
More Posts:
- [fix] RabbitMQ: AuthenticationFailureException ACCESS_REFUSED Login refused authentication mechanism PLAIN - 2022
- Install the minimal Linux on Docker (only 5 mb Alpine Linux) - Docker
- Add Sketch from iPhone to MacBook with macOS Monterey - MacOS
- Word count in Notepad++ - NotepadPlusPlus
- How to hide toolbar on Notepad++ - NotepadPlusPlus
- ModuleNotFoundError: No module named qdarkstyle.colorsystem [Python] - Python
- Fix: Notepad++ bottom status bar not visible - NotepadPlusPlus
- [Solved] Mic not working on iPhone 7 after iOS 14 upgrade - Apple