Pixelord Pixelord - 6 months ago 20
CSS Question

Bootstrap row equally spaced in within parent

I am working in a bootstrap code, where I need to place multiple rows equally spaced within its container.



.myContainer{
background-color: lightblue;
height: 200px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container myContainer">
<div class="row">
<div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div>
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>





Here is a sample html code.
I want the row div to be equally spaced vertically as the height of the container changes. Each of the row will have multiple columns that will hold actual data field.

You can see in the code snippet that the container itself is 200 pixel high.
I wan to space the rows equally over the container. spacing should be changing if the container changes its height.

Any suggestion?

Answer

just check this code and see if this is what you needed

 <style>
        .myContainer {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            background-color: lightblue;
            height: 200px;
        }

        .row-flex {
            width: 100%;
        }

    </style>

</head>

<body>

    <div class="container myContainer">
        <div class="row row-flex">
            <div class="col-xs-9 col-md-7" style="background-color:red;">.col-xs-9 .col-md-7</div>
            <div class="col-xs-3 col-md-5" style="background-color:lavender;">.col-xs-3 .col-md-5</div>
        </div>
        <div class="row row-flex">
            <div class="col-xs-6 col-md-10" style="background-color:lavenderblush;">.col-xs-6 .col-md-10</div>
            <div class="col-xs-6 col-md-2" style="background-color:lightgrey;">.col-xs-6 .col-md-2</div>
        </div>
        <div class="row row-flex" style="background-color:lightcyan;">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</body>
Comments