Created
April 13, 2020 21:38
-
-
Save skazhikadyadya/3fafa65dd09888d384e8030dc640af56 to your computer and use it in GitHub Desktop.
Same height columns in Bootstrap with Flexbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container"> | |
| <h1>Same height columns in Bootstrap</h1> | |
| <div class="row row-flex"> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-1"> | |
| <h3>First column</h3> | |
| <p>This one has a bit longer content</p> | |
| <p>This one has a bit longer content</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-2"> | |
| <h3>Second column</h3> | |
| <p>Normal content.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-3"> | |
| <h3>Third column</h3> | |
| <p>Normal content.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-4"> | |
| <h3>Fourth column</h3> | |
| <p>Normal content.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-5"> | |
| <h3>Fifth column</h3> | |
| <p>Normal content.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4 col-sm-6 col-xs-12"> | |
| <div class="content colour-6"> | |
| <h3>Sixth column</h3> | |
| <p>Normal content.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-muted">This pen is a part of the <a href="https://bootstrapious.com/p/bootstrap-tips-and-tricks" target="_blank">Bootstrap tips and tricks article</a>.</p> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* display this row with flex and use wrap (= respect columns' widths) */ | |
| .row-flex { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| /* vertical spacing between columns */ | |
| [class*="col-"] { | |
| margin-bottom: 30px; | |
| } | |
| .content { | |
| height: 100%; | |
| padding: 20px 20px 10px; | |
| color: #fff; | |
| } | |
| /* Demo backgrounds and styling*/ | |
| .colour-1 { | |
| background: #483C46; | |
| color: #fff; | |
| } | |
| .colour-2 { | |
| background: #3C6E71; | |
| } | |
| .colour-3 { | |
| background: #70AE6E; | |
| } | |
| .colour-4 { | |
| background: #82204A; | |
| } | |
| .colour-5 { | |
| background: #558C8C; | |
| } | |
| .colour-6 { | |
| background: #917C78; | |
| } | |
| body { | |
| padding: 20px 0; | |
| font-family: Roboto, sans-serif; | |
| } | |
| .content h3 { | |
| margin-top: 0px; | |
| font-weight: 300; | |
| } | |
| h1 { | |
| font-weight: 300; | |
| margin-bottom: 40px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment