CODEWITHSUNDEEP
csstwitter-bootstrap
Mohammad Asad
Mohammad Asad

Reputation: 9

Two Columns with two different full-width backgrounds in the same container and row on Bootstrap

Hello Bootstrap Experts!

Currently, I am doing a web project. But I am feeling stuck to create a section. The section has two columns with two different full-width backgrounds in the same row. How can I make it? Here is the screenshot of the section from PSD https://ibb.co/mN4AU7

Regards

Upvotes: 0

Views: 79

Answers (1)

Tony Stark
Tony Stark

Reputation: 265

I divided full view port into two part by using bootstrap row and column. Now you can insert your bootstrap carousel in first column and insert your form code in second column.

div img {
      width: 100%;
      height: auto;
      height: 100vh;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-6 p-0">
          <!-- INSERT HTML CODE FOR CAROUSEL-->
          <img src=https://dummyimage.com/600x400/000/fff&text=insert+carousel+here>
        </div>
        <div class="col-6 p-0">
          <!-- INSERT HTML CODE FOR FORM -->
          <img src="https://dummyimage.com/600x400/ffffff/fff&text=insert+form+here">
        </div>
      </div>
    </div>
    </body>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions