html - How to add full width background in two column (col-md-6) on bootstrap 3 -
i ask how add full width background on 2 column (col-md-6) in bootstrap 3. please refer image.
as can see in image there 2 column green background , image. how set full width background on each column?
thanks :)
<div class="container"> <div class="row"> <div class="col-md-6 the-green-bg"> <h1>lorem ipsum</h1> <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p> <a href="#">learn more</a> </div> <div class="col-md-6"> <!-- full-width image --> </div> </div> </div>
see jsfiddle or snippet below ( better see fiddle because use col-md
, need see result in larger area )
the second col-md-6
can't have background-image because doesn't content in , doesn't have height fill background-image.
the trick set display:flex
on row
cols have equal height.
if want row full page width. use container-fluid
instead of container
let me know if helps
.row { display:flex; } .row .col-md-6{ padding:30px 15px; } .row { background:green; } .row .col-md-6{ background-image:url("http://placehold.it/350x150"); background-repeat:no-repeat; background-size:cover; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-4"> <h1>lorem ipsum</h1> <p>orem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p> <a href="#">learn more</a> </div> <div class="col-md-6"> <!-- full-width image --> </div> </div> </div>
Comments
Post a Comment