Search code examples
htmlcsstwitter-bootstraptwitterfrontend

Bootstrap column element resizing bumping to new line

Seems simple but I can not get these columns to play nice.

https://jsfiddle.net/talgia/xgjt15p3/5/

<html>
<head>
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
<body>

<div class="container-fluid bottompad">
    <div class="row">
        <h2 class="moduleHeading">
            Phasellus ut blandit eros</h2>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo1" class="img-responsive" src="/sites/default/files/Career_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Sed interdum</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum. Praesent egestas nibh at turpis tempor ultrices. </p>
                <div>
                    <a class="btn-primary" href="/node/63">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo2" class="img-responsive" src="/sites/default/files/Hope_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Ut lobortis elementum</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/62">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo3" class="img-responsive" src="/sites/default/files/guardian_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Ut blandit eros</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/124">Learn more</a></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div style="padding: 5px; width:100%;">
                <img alt="photo4" class="img-responsive" src="/sites/default/files/rebound_square.jpg" style="width: 100%;" />
                <h3 style="font-size: 30px; line-height: 30px; margin-bottom: 18px; padding-bottom: 20px; border-bottom: 6px solid;">
                    Elementum tortor</h3>
                <p>Phasellus ut blandit eros, et congue massa. Ut lobortis elementum tortor sed interdum.</p>
                <div>
                    <a class="btn-primary" href="/node/123">Learn more</a></div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

In "md" screen view, a column is being bumped onto a new line depending on the size of the accompanying text of the above columns. How can I make these column elements line up no matter how long the text of the above element is?

Here is a photo that simplifies what I am looking to do. See the jsfiddle for the problem I am running into. element 4 is being pushed to a new line in the MD view and element 3 is taking its place due to the height of the above element.

example of what I am trying to do

Solution

  • The cause of this problem is that the content inside the columns is not the same height. Here's an article that explains it: https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643

    The Bootstrap height issue occurs because the columns (col--) use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

    The simplest thing, I think, is making all columns have the same height. Flexbox is, in my opinion, the best way to do this, as the layout will be flexible no matter the content you have inside the container (Bootstrap 4 already uses flexbox). You can also simply set a fixed height value for all the columns (the article offers several ways to do that). The article also contains a couple more approaches.