This chapter discusses about the vertical alignment utilities provided by Bootstrap.
- You can change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
- Choose from following classes as per your need:
- .align-baseline
- .align-top
- .align-middle
- .align-bottom
- .align-text-bottom
- .align-text-top
- In order to align the non-inline content, use flex box utilities
Let us see an example to align the inline elements:https://www.tutorialspoint.com/bootstrap/examples/vertical_align_inline.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Vertical align</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="display-5">Vertical align</h4><p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br><button class="btn align-baseline text-bg-success">align baseline</button><button class="btn align-top text-bg-success">align top</button><button class="btn align-middle text-bg-success">align middle</button><button class="btn align-bottom text-bg-success">align bottom</button><button class="btn align-text-top text-bg-success">align text top</button><button class="btn align-text-bottom text-bg-success">align text bottom </button></div></body></html>
Let us see an example to align the table cell elements:https://www.tutorialspoint.com/bootstrap/examples/vertical_align_table.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Vertical align</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="display-5">Vertical Align - Table cell elements</h4><p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p><br><br><table class="table-bordered bg-light" style="height: 100px;"><tbody><tr><td class="p-2 align-baseline">align baseline</td><td class="p-2 align-top">align top</td><td class="p-2 align-middle">align middle</td><td class="p-2 align-bottom">align bottom</td><td class="p-2 align-text-top">align-text-top</td><td class="p-2 align-text-bottom">align-text-bottom</td></tr></tbody></table></div></body></html>
Leave a Reply