Twitter Bootstrap Question posted in

Bootstrap – the column is pushed down incorrectly when title have 3 line – Twitter bootstrap

I have a list article in my blog. Show three columns.

The problem is: when the title of the article has 3 line. The columns are pushed down if have 4 article.

Like this:

article 1            article 2           article 3

                     article 4

It should be like:

article 1            article 2           article 3

article 4

My code like:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>10 The article have 2 line, it will break four item in this </h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
    </div>
</div>

Note: click run code -> full page to show.

Or see my pen: https://codepen.io/vanloc/pen/RZqVXR

Have any method to resolve this problem?

The title is defined by the user, I can’t control that.

Tags:

2

Answers


  1. 0

    You can use a clearfix div to set the row correctly if the heights are uneven!

    An example of that is documented here: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

    Or if you can use a LESS/SCSS mixin, that’s demonstrated here: https://getbootstrap.com/docs/3.3/css/#less-mixins-clearfix

    Here is that code snippet with the clearfix in. Please let me know if this isn’t the solution you were looking for. Thanks!

    <div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>10 The article have 2 line, it will break four item in this </h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>

        <!-- CLEARFIX DIV -->
        <div class="clearfix visible-lg visible-md-block"></div>

        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You can Try Something Like This. Using this Multiline Ellipses

    CSS

    .post-prev-title h3
{
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;/*restricting to 1 line*/
    -webkit-box-orient: vertical;
    overflow: hidden;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search