Bootstrap Snippet Full size image in a box using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <section class="added-values">
  <div class="container">
  <div class="row">
  <!-- start left content -->
  <div class="col-md-6 col-xs-12">
  <h2 class="title-section">Lorem ipsum title</h2>
    <div class="content-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus tincidunt, volutpat diam ac, vulputate metus. Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh nec.·Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh.</p>
  </div>
    <div class="content-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus tincidunt, volutpat diam ac, vulputate metus. Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh nec.·Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh.</p>
  </div>
    <div class="content-box">
  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus tincidunt, volutpat diam ac, vulputate metus. Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh nec.·Fusce dapibus, arcu ac imperdiet rutrum, libero nulla placerat tellus, nec dapibus ligula nisl vel est. Nulla non enim euismod, dapibus ligula nisl vel est. Nulla non enim euismod, interdum nibh.</p>
  </div>
  </div>
  <!-- end left content -->
  <!-- start right content -->
  <div class="col-md-6 col-xs-12">
  <div class="content-image">
  <img src="http://www.bisudigital.it/bootsnipp/img-2.jpg" alt="" />
  </div>
  </div>
  <!-- end right content -->
  </div>
  </div>
  </section>
  <!-- end section added values -->
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.added-values {
    width: 100%;
    height: 600px;
}
.added-values > .container {
    position: relative;
    height: 100%;
}
    
.added-values > .container .row {
    position: relative;
    height: 100%;
    width: 100%;
}
.added-values > .container .row > div:last-child {
    position: absolute;
    left: 50%;
    top: 0px;
    bottom: 0px;
    right: 0px;
}
.added-values > .container .row > div:last-child .content-image {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}
.added-values > .container .row > div:last-child .content-image img {
    min-width: 100%;
    vertical-align: middle;
    min-height: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full size image in a box"
Bootstrap 3.0.0 Snippet by vvave

Related: See More

Questions / Comments:

"Full size image in a box" Bootstrap 3.0.0 Snippet by vvave

Related: See More

Questions / Comments:

"Full size image in a box"
Bootstrap 3.0.0 Snippet by vvave