Equal column heights Bootstrap

Jordi

New Member
#1
So, I'm trying to get into coding again through school and have been giving the task to create a 'fake' company with a website to test my programming skills. I'm using bootstrap, but I can't seem to manage to get the columns in my row have an equal height.

I have the following HTML & CSS so far:
Mã:
.dienst-kaart{
    padding:15px;
    min-height:100%;
}

.dienst {
     background:white;
       padding:4%;
       opacity:0.9;
       box-shadow: 5px 10px 10px #e1e0e2;
}
Mã:
<div class="row">
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Web design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Grafisch design</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet,
                faucibus leo.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>Online marketing</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
    <div class="col-md-3 dienst-kaart">
        <div class="dienst">
            <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png"
                alt="Web-design-Icon" width="20%">
            <h2>E-commerce</h2>
            <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus.
                Integer cursus, turpis.</p>
        </div>
    </div>
</div>
Can anyone help me out using the flexbox technique, because it doesn't seem to work for me. Thank you in advance!
 

Admin

Administrator
Thành viên BQT
#2
Put display: flex in .dienst-kaart rule.
Mã:
.dienst-kaart{
    display: flex;
    padding:15px;
    min-height:100%;
}

.dienst {
    background:white;
    padding:4%;
    opacity:0.9;
    box-shadow: 5px 10px 10px #e1e0e2;
}
Mã:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Webdesign-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Web design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Grafisch-Design-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Grafisch design</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mauris auctor, volutpat dui sit amet, faucibus leo.</p>
            </div>
        </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/Online-Marketing-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>Online marketing</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p>          </div>
            </div>
        <div class="col-md-3 dienst-kaart">
            <div class="dienst">
                <img class="diensten-icon" src="http://flevonline.nl/wp-content/uploads/2018/10/E-Commerce-Flevonline.png" alt="Web-design-Icon" width="20%">
                <h2>E-commerce</h2>
                <p>Praesent tempor nunc placerat feugiat commodo. Aliquam in velit et ipsum iaculis commodo eget in metus. Integer cursus, turpis.</p>
            </div>
        </div>
    </div>
 
OP
OP
J

Jordi

New Member
#3
That did it! I think I had a major brain fart after just adding the simple line of code. Thank you for your help :)
 
Top