Search code examples
htmlcssjustify

Distribute and justify bootstrap rows and columns content according to parent cointainer html css

So the code is something like:

<section height=“1000px” width=”100%”>
   <div class=" container">
      <div class="row">
         <div class="col-md-12"></div>
      <div class="row">
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
         <div class="col-md-6"></div>
   </div>
</section>

The objetive is to distribute the columns height equally according to the parent container height and width which are fixed. regardless its content. See the graphic to clarify what is pretended. I want to turnt this:

table 1

Into this:

table 2

I have seen other post that suggest to use "display:flex" to do something similar to this but not exactly. When I use "display:flex", to try to use later align-items, then bootstrap columns info is missed. Thanks.

Solution

  • Fundamental Bootstrap

    1. BS uses classes that determine layout, style, and responsiveness. BS CSS is tightly integrated so that conflicts are minimized and overrides are difficult. You need to use BS classes as much as possible.

    2. If you require unusual styles that aren't covered by BS classes then keep them minimal -- preferably to a single element by using style and/or width/height attributes.

      <main ... height='1000px' style='min-height: 1000px'>...</main>

    3. At the top level of the DOM are the basic layout tags. Its a hierarchy that should be adhered to: 

      <body>
  <main class='container'>
    <sector class='row'>
      <!-- col-* | the total of all * cannot exceed 12 per .row -->
      <div class='col-6'></div><div class='col-6'></div>

      Note, the use of <main> and <section> tags. Its valid and OK semantically but not required. I do this to break up the monotony of <div> which makes developers error prone (Your example was missing an end tag). So the class hierarchy is required -- the alternative tags are not required but recommended.

    4. In the OP HTML, the .container was wrapped in a <section> as per point #3, the only tag that should wrap .container is <body>. So remove that <section>.

    5. Also, in OP HTML, the last .row has four .col-md-6 The total number per .row should be 12. Add another .row and move two of those .col-md-6 into it.

    BS Classes

    The following is a brief outline of which BS classes and inline styles were used and why:

    • <style>

      • .box::after {content: attr(class);} - Displays tag's classList for demo purposes

    • <main>

      • .container - Required layout
      • .d-flex, .flex-column, .align-content-stretch - Makes all .row to stretch vertically and evenly
      • .text-center - All descendant tags text are centered due to inheritance
      • Inline styles - width='100%' height='1000px' style='min-height: 1000px'
    • <section>
      • .row - Required layout
      • .flex-fill - Ensures that the tag's and its sibling's heights are evenly filled within the height of their parent tag
    • <div>
      • .col-md-12/6 - Required layout
      • .d-flex, .flex-wrap, .justify-content-center, .align-content-center - All content within will be horizontally and vertically centered

    Also, you'll want to know how to override BS styles eventually (if not already) -- refer to this article.

    Demo

    Note: Details are commented in demo, review the demo in Full Page Mode.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

  <!-- External stylesheets go here - these styles will override* styles from 
       preceding stylesheets -->
  <!-- Example: <link href="style.css" rel="stylesheet"> -->

  <!-- Any styles only applying to this page goes into the <style> tag below. 
       These styles will override* any style from a stylesheet -->
  <style>
    body {
      background: #000;
    }
    
    .box::after {
      content: attr(class);
    }
  </style>
</head>

<body>

  <!-- Any inline style (aka style attribute or width/height attribute) overrides*
       external stylesheets and style tags -->
  <!-- *override is guaranteed due to the rules of cascading with the exception of
       !importance and specificity -->  

  <main class="container bg-dark border border-light d-flex flex-column align-content-stretch text-center" width='100%' height='1000px' style='min-height: 1000px'>
    <section class="row flex-fill">
      <div class="box col-md-12 bg-primary border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-warning border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-success border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
    <section class="row flex-fill">
      <div class="box col-md-6 bg-danger border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
      <div class="box col-md-6 bg-info border border-dark d-flex flex-wrap justify-content-center align-content-center"></div>
    </section>
  </main>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <!-- All external script files should here -->
  <!-- Example: <script src='script.js'></script> -->

  <script> 
   <!-- Script for just this page belongs -->
  </script>
</body>

</html>