How do i fit bootstrap grid layout's column to same heights?

How do i fit bootstrap grid layout's column to same heights?
0

#1

EDIT: Problem solved!
So im wondering if its possible to fit both picture and text into same height, i at least wish to cut the text to fit the actual column to be same height as pictures are when i resizing to laptop, tablet and mobile versions.
Here’s how desktop looks:

Here’s how laptop version looks:

tablet version:

mobile version:

HTML:

 <!-- Navigation  bar -->

        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#">Gamers Heaven</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">About</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Games
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">FPS</a>
                                    <a class="dropdown-item" href="#">Open World</a>
                                    <a class="dropdown-item" href="#">RPG</a>
                                </div>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Other gaming related
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Something</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                    </div>
        </nav>

        <!-- Carousel -->
      
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="4000">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <a href="#"><img class="d-block w-100" src="https://pmcvariety.files.wordpress.com/2018/06/pubg.jpg?w=1000&h=563&crop=1" alt="First slide"></a>
              </div>
              <div class="carousel-item">
                <a href="#"><img class="d-block w-100" src="https://hexus.net/media/uploaded/2018/5/a8d7638a-ae49-4794-b422-06b667bcc4f5.jpg" alt="Second slide"></a>
              </div>
              <div class="carousel-item">
                <a href="#"><img class="d-block w-100" src="https://store.ubi.com/dw/image/v2/ABBS_PRD/on/demandware.static/-/Sites-masterCatalog/en_US/dwd8a7b19e/images/large/5afda5f788a7e34d25b5012f-1.jpg?sw=1084&sh=822&sm=fit" alt="Third slide"></a>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
            
        </div>
        
        <!-- Main Content -->
        <div class="container-fluid">
        <div class="row  row-eq-height mt-5 mb-5 ml-3 mr-3">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="row  row-eq-height">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
                        <p>Lorem Ipsum is simply dummy text of the printing and 
                        typesetting industry. Lorem Ipsum has been the industry's standard 
                        dummy text ever since the 1500s, when an unknown printer took a 
                        galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, bu</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="row  row-eq-height">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
                        <p>Lorem Ipsum is simply dummy text of the printing and 
                        typesetting industry. Lorem Ipsum has been the industry's standard 
                        dummy text ever since the 1500s, when an unknown printer took a 
                        galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, bu</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row  row-eq-height mt-3 mb-5 ml-3 mr-3">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="row  row-eq-height">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
                        <p>Lorem Ipsum is simply dummy text of the printing and 
                        typesetting industry. Lorem Ipsum has been the industry's standard 
                        dummy text ever since the 1500s, when an unknown printer took a 
                        galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, bu</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <div class="row  row-eq-height">
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <img class="img-fluid" src="https://static-assets-prod.epicgames.com/fortnite/static/webpack/8704d4d5ffd1c315ac8e2c805a585764.jpg">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text">
                        <p>Lorem Ipsum is simply dummy text of the printing and 
                        typesetting industry. Lorem Ipsum has been the industry's standard 
                        dummy text ever since the 1500s, when an unknown printer took a 
                        galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, bu</p>
                    </div>
                </div>
            </div>
        </div>
        </div>


        <!-- Footer -->
        
        <footer class="footer">
            <p>Made by: Ismar Begić</p>
            <p>Contact email: [email protected]</p>
            <p>@2018 All Rights Reserved</p>
        </footer>

CSS:

.navbar-brand {
    font-size: 30px;
}

.navbar-nav > li {
    font-size: 18px;
}

.carousel-control-prev,
.carousel-control-next {
    border: 2px solid white;
    margin: auto 0;
    height: 50px;
    width: 40px;
    background-color: white;
}

.carousel-control-prev-icon {
    height: 27px;
    width: 27px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%#000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    height: 27px;
    width: 27px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%#000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    
}

.carousel-indicators li {
    width: 15px;
    height: 15px;
    border: 1.5px solid white;
    border-radius: 50%;
    margin: 0 8px;
}

.carousel .carousel-item > a > img {
    width: 100%;
    height: 40em;
}



.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    background-color: rgb(197, 194, 194);
    height: 12em;
}

.footer > p {
    line-height: 1em;
    font-family: 'Montserrat', sans-serif;
    padding-top: 5px;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}


@media (min-width: 320px) and (max-width: 768px) {
    .carousel  .carousel-item {
        height: 22em;
    }

    .carousel .carousel-item > a > img {
        height: 22em;
    }

    

}

As you can see i already have tried some solutions like doing something in CSS and trying row-eq-height but nothing seems to be working. I know text might be bugging, but is there any way i can fit both pic and text’s columns to fit at same height? At least to possibly cut the text so it can fit, i will be putting them into link’s anyway. It messed up my margins between columns when resizing too.