0

I using Bootstrap4 for my personal website and I am not able to make the columns of equal height. I have looked for solutions here but the solutions don't seem to work on my code. I would appreciate any input.

<!-- Start projects section--->
<div id="projects"  class="offset">

    <!--- start jumbotron -->
    <div class="jumbotron">
        <div class="col-12 text-center">
            <h3 class="heading">Projects</h3>
            <div class="heading-underline"></div>
        </div>

        <div class="row">

            <div class="col-md-6 projects">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8 text-left">
                        <h5 class="heading project-title">The Twitter Bakery (2018) </h5>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <!--- image of client -->
                        <img src="img/mountains_trip.jpg" alt="image not displayed">
                    </div>
                    <div class="col-md-8">
                        <!--- text of client -->
                        <div>
                          Some words<br><br>Some more words
                        </div>
                        <hr class="projects-hr">
                        <a href="https://github.com/COM1001-ComputerScience-Sheffield/team-08" class="project-link text-center" target="_blank"><i class="fab fa-github fa-2x"></i></a>

                    </div>
                </div>
            </div>
            <div class="col-md-6 projects">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8 text-left">
                        <h5 class="heading project-title">Jersey Allocation (2018)</h5>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <!--- image of client -->
                        <img src="img/mountains_trip.jpg" alt="image not displayed">
                    </div>
                    <div class="col-md-8">
                        <!--- text of client -->
                        <div>
                           Some words.
                        </div>
                            <hr class="projects-hr">
                            <a href="https://github.com/eusoffhackers/jersey_allocation" class="project-link text-center" target="_blank"><i class="fab fa-github fa-2x"></i></a>

                    </div>
                </div>
            </div>


        </div>

    </div>
    <!--- end jumbotron -->

</div>

<!-- end projects section--->

Here is my css for the section. The (.row and [class*="col-"]) rules are copied from the answers presented in the above link. 

.row{
  overflow: hidden;
}

[class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.projects img{
  width:100%;
  border-radius:10%;

}


.projects hr{
  border-top:0.05rem solid #ad7232!important;
  padding-bottom: 0.1rem;/* makes them visible in some cases*/
}

.project-link .svg-inline--fa{
  align-self: center;
  color: #505962 ;

}

.project-title{
  text-transform: uppercase;
  color: #ed9a00;

}

This is how the current section looks

Eeshan S Jaiswal
  • 3
  • 4
  • In that answer, solutions titled `Solution 1`, `Solution 2`, etc... are all for Bootstrap 3. The only one which works in Bootstrap 4 is the one titled `Bootstrap 4` (`Solution 0`, so to speak). Do not use the negative margins hack in Bootstrap 4. If you can't get it to work, please post a [mcve]. What you have now is insufficient to repro your issue. – tao Apr 12 '20 at 05:25
  • In order to achieve this (which is the default behavior in Bootstrap), you have to respect the Bootstrap markup. As in, `.col-*`s should only be placed as immediate children of `.row`s or `.form-row`s. You seem to expect the same behavior when you place them in a `.jumbotron`. Please read very carefully ["Here's how it works" section](https://getbootstrap.com/docs/4.0/layout/grid/). 2nd and 3rd paragraph are detailing what I said above. – tao Apr 12 '20 at 05:30

0 Answers0