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,
- [Solved] Bootstrap tooltip not working
- Create Bootstrap carousel slider with Text
- Bootstrap tooltip not working
- How to disable button in Bootstrap
- Vertical align two div's in Bootstrap [HTML CSS]
- Bootstrap Button Colors Classes
- How to Change Bootstrap Carousel Slide Speed
- Right Align Text in Bootstrap framework
- How to add hint text in bootstrap input text field and text area
- Simple Login Page using Bootstrap
- Make Bootstrap Button look like a link
- Align left align text in Bootstrap
- Bootstrap Nav Menu Dropdown on hover
- Rounded Images in Bootstrap framework
- What is Bootstrap Jumbotron and how to use it
More Posts:
- Bash Command to Do Nothing with Example - Bash
- Graph API error when querying BookingBusinesses - ErrorExceededFindCountLimit, The GetBookingMailboxes request returned too many results - Microsoft
- [Vi/Vim] How to move cursor to the start of a line - MacOS
- JavaScript : Get url protocol HTTP, HTTPS, FILE or FTP - JavaScript
- Android: Unknown error code during application install : - Android
- Mac (macos) startup keyboard boot sequence combinations - MacOS
- Fix SharePoint 2019 installation error This product requires Visual C++ Redistributable Package for Visual Studio 2017 - SharePoint
- Increase Font Size of Eclipse Java Code - Eclipse