CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive
Michał Dulik
Michał Dulik

Reputation: 13

Bootstrap 4 image half page width

How can I make responsive layout like this? layout

I need only few tips how to do it. I dont need full source code. Sorry for my english.

My code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src='https://via.placeholder.com/350x150' />
    </div>
    <div class="col-md-6">
      CONTENT
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      CONTENT
    </div>
    <div class="col-md-6">
      <img src='https://via.placeholder.com/350x150' />
    </div>
  </div>
</div>

I want img to be half page size.

Upvotes: 1

Views: 6051

Answers (2)

godblessstrawberry
godblessstrawberry

Reputation: 5058

here's your layout with bootstrap 4. put image into box--wide but keep in mind pink divs are absolutely positioned so they will not resize the parent - they will take full parent's height which depends on content in gray box

to make this responsive - my suggestion is to wrap images into .col-12and for desktop set it's to position static while images are absolute so they will align inside .container, not .col-12 and on mobile images should be just static

.container {
  background: #5f408c;
  padding: 20px;
}
.container h1 {
  text-align: center;
  color: white;
}

.box {
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 40px;
}
.box--wide {
  position: absolute;
  left: 15px;
  right: calc(50% + 15px);
}
.box--wide:last-child {
  right: 15px;
  left: calc(50% + 15px);
}
.box--pink {
  background: #ec008c;
}
.box--gray {
  background: #272827;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>TITLE</h1>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="box box--pink box--wide">image</div>
    <div class="col-12 col-md-6 offset-md-6 ">
      <div class="box box--gray">content</div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="box box--gray">content</div>
    </div>
    <div class="box box--pink box--wide">image</div>

  </div>
</div>

Upvotes: 2

VSM
VSM

Reputation: 1785

Check fiddle and snippet below. It is fully responsive and it is working in any device.

body {
  padding:15px 0;
}
.content-box {
  position:relative;
  width:100%;
  min-height:350px;
  background:#ccc;
  margin:15px 0;
}

.img-box.left {
  position:absolute;
  top:-15px;
  right:-15px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

.img-box.right {
  position:absolute;
  top:-15px;
  left:-15px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

@media only screen and (max-width: 768px) {
    .img-box.left, .img-box.right  {
      position:absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      width:100%;
      background:red;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class=container>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">
        <div class="img-box left">
        image
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">
         <div class="img-box right">
        image
        </div>
      </div>
    </div>
  </div>
</div>
</body>

https://jsfiddle.net/Sampath_Madhuranga/tfz87bqe/18/

This works for you...Check and let me know if need any help. Thanks.

Upvotes: 2

Related Questions