CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
executable
executable

Reputation: 3600

How to get a block out of container

I have the following code (please open as full page) :

.header_custom{
  background: green;
  color: #FFFFFF
}

#my_block{
    background: lightgray;
    padding: 5px; 
}

#right_side{
    position: absolute;
    margin-left: 65%;
}

@media (max-width: 991px) {
    #right_side{
        position: static;
        margin-left: 0;
    }
    .btn{
        width: 100%
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <form>
        <div class="row">
            <div class="col-md-6">
                <div class="header_custom">HEADER 1</div>
                <p>Lorem ipsum dolor sit</p>
                <div class="row">
                    <div class="col-md-8">
                        <select class="form-control">
                            <option value="1" selected="">OPTION 1</option>
                            <option value="2">OPTION 2</option>
                            <option value="3">OPTION 3</option>
                            <option value="4">OPTION 4</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="header_custom">HEADER 2</div>
                <p>Lorem ipsum dolor sit</p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" id="input1" class="form-control" size="30">
                            <label for="input1">Lorem</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="input2" class="form-control" size="30">
                            <label for="input2">Ipsum</label>
                        </div>
                    </div>
                    <div id="right_side" class="col-md-6 ">
                        <div id="my_block">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                            <p>Lorem ipsum dolor</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Ut enim ad minim veniam, quis nostrud</p>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn" disabled="">NEXT</button>
            </div>
        </div>
    </form>
</div>

or https://jsfiddle.net/y0p8w52u/

I want to make the right block responsive. As you can see, it's going outside of the page. I also would like to make it bit wider.

I also tried with 

#right_side{
    position: absolute;
    right: 0
}

Upvotes: 0

Views: 317

Answers (2)

Dobrosława Torańska
Dobrosława Torańska

Reputation: 36

So the magic of boostrap is that you can make your website responsive by setting different widths for your elements based on 12 column grid system. You just set your container, your rows and assign to them different classes(xs for small devices, md for tablets lg for desktop), then you decided how much space do you want them to take. If you want two columns on medium size devices you set col-6-md for both. There is one rule here: 6 + 6 = 12 :) Look at below snippet to help you out:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Above snippet is from offical Boostrap documentation, which is worth to explore.

I have corrected your code accordingly (I have removed right-side id ;)):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
     <div class="row">
    <form>
            <div class="col-md-6">
                <div class="header_custom">HEADER 1</div>
                <p>Lorem ipsum dolor sit</p>
                    <div class="col-md-6">
                        <select class="form-control">
                            <option value="1" selected="">OPTION 1</option>
                            <option value="2">OPTION 2</option>
                            <option value="3">OPTION 3</option>
                            <option value="4">OPTION 4</option>
                        </select>
                    </div>
            </div>
      <div class="container">
          <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="header_custom">HEADER 2</div>
                <p>Lorem ipsum dolor sit</p>
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <div class="form-group">
                            <input type="text" id="input1" class="form-control" size="30">
                            <label for="input1">Lorem</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="input2" class="form-control" size="30">
                            <label for="input2">Ipsum</label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div id="my_block">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                            <p>Lorem ipsum dolor</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Ut enim ad minim veniam, quis nostrud</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                <button type="submit" id="btnCompleteProductConfig" class="btn" disabled="">NEXT</button>
            </div>
        </div>
    </form>
</div>

And your CSS:

.header_custom{
  background: green;
  color: #FFFFFF
}

#my_block{
    background: lightgray;
    padding: 5px; 
}

enter image description here

Upvotes: 1

Dimitar Spassov
Dimitar Spassov

Reputation: 2733

Since you are using rows and columns, you can rely on them and remove the absolute positioning of #right_side.

And I don't quite understand what you want to achieve with the media query rules for #right_side so I have removed them from the snippet.

Is this what you are looking for:

.header_custom{
  background: green;
  color: #FFFFFF
}

#my_block{
    background: lightgray;
    padding: 5px; 
}

@media (max-width: 991px) {
    .btn{
        width: 100%
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <form>
        <div class="row">
            <div class="col-md-6">
                <div class="header_custom">HEADER 1</div>
                <p>Lorem ipsum dolor sit</p>
                <div class="row">
                    <div class="col-md-8">
                        <select class="form-control">
                            <option value="1" selected="">OPTION 1</option>
                            <option value="2">OPTION 2</option>
                            <option value="3">OPTION 3</option>
                            <option value="4">OPTION 4</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="header_custom">HEADER 2</div>
                <p>Lorem ipsum dolor sit</p>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" id="input1" class="form-control" size="30">
                            <label for="input1">Lorem</label>
                        </div>
                        <div class="form-group">
                            <input type="text" id="input2" class="form-control" size="30">
                            <label for="input2">Ipsum</label>
                        </div>
                    </div>
                    <div id="right_side" class="col-md-6 ">
                        <div id="my_block">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
                            <p>Lorem ipsum dolor</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <p>Ut enim ad minim veniam, quis nostrud</p>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn" disabled="">NEXT</button>
            </div>
        </div>
    </form>
</div>

Upvotes: 1

Related Questions