0

I have a container that has two classes inside. One is 5 while the other is 7. The 5 is a text and the 7 is an image. The problem is the height. The first class of 5 has a larger height than the the image because of the text. But I want it to match. Look at the pictures. enter image description here

The blue color is the container (12). The green text is text 5, and the image is 7. This is the code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="css/basic-template.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    </head>
    <body>      
    <div class="container"> <!--Container 2 - Popust studentima -->
                    <div class="row">
                        <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                        <div class="col-lg-12 bg-primary"> 
                            <div class="col-lg-5 bg-zelenapozadina">
                                <center> <font face="Roboto Condensed" size="6"> Popust studentima </font> </center>
                                <p> 
                                <font face="Roboto Condensed" size="4"> 
                                Lorem ipsum dolor sit amet, his no postulant liberavisse. At nibh lucilius sed. Omnium latine efficiendi ea vis. Elit facilisis mel et. Eu qui erat tation elaboraret. Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.Ut nec tamquam vocibus urbanitas, =

                                </font>
                                </p>
                            </div>

                            <div class="col-lg-7 bg-danger" style="padding-left: 0px;  padding-right: 0px;">
                                <center> <img src="Slike/studenti.jpg" class="img-responsive"> </center>
                            </div>

                        </div>



                <!-- JavaScript fajl -->
                <script src="js/jquery.min.js"></script>
                <!-- Kompresovan JavaScript fajl -->
                <script src="js/bootstrap.min.js"></script>


                <!-- bg-warning = Pozadina zuta -->
        </body>
    </html>
Ivan
  • 816
  • 2
  • 9
  • 14
  • Set the two elements to have the same height, and use `overflow:hidden` –  Nov 22 '16 at 15:17
  • You could try what @SuperCoolHandsomeGelBoy stated, or you could tweak the `line-height` property to get it as close as possible, _then_ set the height and overflow to hidden. This way, none of the text will get cut off. – Pranav Nutalapati Nov 22 '16 at 15:21

0 Answers0