Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
Updated 2018
Bootstrap 4, the concept is still the same: https://codeply.com/go/ffaQgse2SU
I have answered similar questions on this, but yours is a little different because the background-image. The best way I've found is using a CSS pseudo element becuase it adjusts along with right col-md-6 and therefore works responsively.
Bootstrap 3 Demo: http://codeply.com/go/rWOGi4LrU1
.right {
z-index: 0;
color: #fff;
}
.right:before {
background-image:url(..);
content: '';
display: block;
position: absolute;
z-index: -1;
width: 999em;
/* allow for bootstrap column padding */
top: -15px;
left: -15px;
bottom: -15px;
}
Demo
Also see: Get Two Columns with different background colours that extend to screen edge
If you would like to target only medium screen sizes you can do it in the following way. give width: 120% to your img element and it will overflow and take the full size at the left.
working snippet
.img {
width: 120%;
}
.col-md-6 {
background-color: green;
}<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg_blue">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6">
<div id="login-form-box" class="form-box">
<div id="login-form-info" class="form-info">
</div>
<form id="login-form" class="form" action="" method="post">
<div>
<label for="login"></label>
<input name="login" type="text" /><br />
<label for="password"></label>
<input name="password" type="password" /><br />
</div>
</form>
<div id="login-form-submit" class="form-submit" onclick="document.forms['login-form'].submit();">
<span></span>
</div>
<!-- #form-submit -->
<div id="links">
<a href="">
</a><br />
<a href="">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="Background" />
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
</body>
</html>NOTE:
If you want to target all screen sizes media then just use col-lg-* col-xs-* col-sm-* i.e different responsive bootstrap classes.
Hope this helps!