Limited Text in one line on a HTML page using Bootstrap

Question

There is a image and headline below the image the entire page has the same thing,there are 4 images and headlines below them but when the text in the headline goes in next line the entire design spoils.Have a look at the screen shorts.

Headline in one line looks like this

 Headline in two line looks like this

CSS

<div class="row">
                <!--Start OF Live Feeds-->
                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>
                    </div>
                </div>
              </div>

@Ibrahim Alsurkhi

How do I implement what your saying like this

    <style type="text/css">

    .work-item{
    min-height:250px;
    }
</style>

Then on div tag class

<div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

Code for two rows

 <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsOne" runat="server" onserverclick="LiveFeedsOneEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsOne" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsOne" runat="server" Text="Don’t quit your job if you work in"></asp:Label></h4>
                            </a>
                        </div>

                    </div>

                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsTwo" runat="server" onserverclick="LiveFeedsTwoEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsTwo" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsTwo" runat="server" Text="Live Feeds Two: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsThree" runat="server" onserverclick="LiveFeedsThreeEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsThree" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsThree" runat="server" Text="Live Feeds Three: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFour" runat="server" onserverclick="LiveFeedsFourEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFour" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFour" runat="server" Text="Live Feeds Four: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsFive" runat="server" onserverclick="LiveFeedsFiveEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsFive" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsFive" runat="server" Text="Live Feeds Five: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSix" runat="server" onserverclick="LiveFeedsSixEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSix" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSix" runat="server" Text="Live Feeds Six: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsSeven" runat="server" onserverclick="LiveFeedsSevenEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsSeven" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsSeven" runat="server" Text="Live Feeds Seven: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

                <div class="col-xs-6 col-sm-3 mix livefeeds">
                    <div class="work-item">
                        <div class="image-holder">
                            <a href="images/gallery/1.jpg" id="hrefLiveFeedsEight" runat="server" onserverclick="LiveFeedsEightEvent">
                                <img src="images/gallery/1.jpg" alt="The People Expression Image" id="imgLiveFeedsEight" runat="server" />
                                <h4>
                                    <asp:Label ID="lblLiveFeedsEight" runat="server" Text="Live Feeds Eight: Don’t quit your job if you work in 1 of these 5 industries"></asp:Label></h4>
                            </a>
                        </div>

                    </div>
                </div>

Answer 1

It is important that you always group four columns into one .row element.

The .row class clears the floating of the columns, so that no matter how high the individual columns in one row are, the columns in the next row will always start on the same vertical line again.

The Bootstrap grid system is a 12 column grid, so it is important that the sum of the “x” of the col-sm-x classes you’re using adds up to 12 as well. (Less than 12 would work, but is not the common use case – and more than 12 definitively leads to unwanted effects, such as the one you saw here.)

Answer 2

work-item{
min-height:250px;
}

set min-height to item Proportional to the height to image and word size