CODEWITHSUNDEEP
htmlcssbootstrap-4
Hanqing Zhao
Hanqing Zhao

Reputation: 25

Divs layout when using Bootstrap

I want to make two divs side by side like this shown in the picture below. I want

However, the when the screen's width becomes larger, the layout becomes this: Actual Here is the code:
Is there any master who can help me through this? Thank you so much and appreciate it.

  .Frank-row
        {
            border: 2px solid green;
        }
        
        .Frank-left
        {
            border: 2px dotted red;
        }
        
        .Frank-right
        {
            border: 2px dotted orange;
        }
<div class="container-fluid" >
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 Frank-row" >
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left" >
                    <p>left</p>
                    <p>left</p>
                    <p>left</p>
                    <p>left</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-offset-sm-6 col-md-offset-6 col-lg-offset-6 Frank-right" >
                    <p>right</p>
                    <p>right</p>
                    <p>right</p>
                    <p>right</p>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 51

Answers (3)

Selvakumar
Selvakumar

Reputation: 537

Include bootstrap.css in your file, and remove col-xs-12 in two divs inside Frank-row div, Because col-xs-12 class takes priority over the other col-** class css values. 

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-left">
      <p>left</p>
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-right">
      <p>right</p>
      <p>right</p>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

Upvotes: 0

Happysmithers
Happysmithers

Reputation: 761

Just leave out the col-offset part!

.Frank-row {
  border: 2px solid green;
}

.Frank-left {
  border: 2px dotted red;
}

.Frank-right {
  border: 2px dotted orange;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left">
      <p>left</p>
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-right">
      <p>right</p>
      <p>right</p>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

Fiddle to test resizing: https://jsfiddle.net/xt41kj6j/

Upvotes: 0

hairmot
hairmot

Reputation: 2975

couple of issues here. First, you don't need the wrapper div to achieve this layout.

Secondly, you had offset classes on your div which would push it onto the next line. Removing these classes has fixed the layout.

See example here

Upvotes: 1

Related Questions