Mona Jalal Mona Jalal - 5 months ago 40
CSS Question

Juxtaposing three background photos next to each other in jumbotron

I have the following code for putting three background photo next to each other. I am not sure why nothing is shown in the jumbotron. Can you please hint me to figure what are the possible causes?

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
<div class="container text-sm-center p-y-3">

<div class="col-lg-3 col-md-3 col-sm-3" style=" background: url('./assets/img/glass.jpg'); background-repeat: no-repeat; background-size:contain ">

</div>


<div class="col-lg-6 col-md-6 col-sm-6" style="background: url('./assets/img/mhacks.jpg'); background-repeat: no-repeat; background-size:contain ">

</div>


<div class="col-lg-3 col-md-3 col-sm-3" style="background: url('./assets/img/rift.jpg'); background-repeat: no-repeat; background-size:contain ">

</div>

</div>
</div>

Answer

Because you don't have any content inside divs,if you want only image in divs, you can do like this:

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">
    <div class="container text-sm-center p-y-3">

        <div class="col-lg-3  col-md-3 col-sm-3">
            <img src="./assets/img/glass.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>
        <div class="col-lg-6  col-md-6 col-sm-6">
            <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>
        <div class="col-lg-3  col-md-3 col-sm-3">
            <img src="./assets/img/rift.jpg" class="img-responsive" style="width:100%; height:auto"/>
        </div>

    </div>
</div>
Comments