Twitter Bootstrap Question posted in

Container not working inside contatiner-fluid for larger screens – Twitter bootstrap

I have a container-fluid with col-lg-2 for left menu options and col-lg-10 for content sections. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid>
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
        <div class="col-lg-10>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

This works perfect for small and medium screen but doesn’t work for large screen i.e. min-width: 1200px. In small and medium screen the col-lg-2 and col-lg-10 are two rows up and down. But for bigger screens, these are two columns and the width goes beyond the screen.

Any help is appreciated. Thanks

Tags:

2

Answers


  1. 0

    close your classes. container-fluid and ‘col-lg-10’ are not closed.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">

    </div>
    <div class="col-lg-10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1 ">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <div class="form-group ">
                            <label for="exampleInputPassword1 ">Password</label>
                            <input type="password " class="form-control " id="exampleInputPassword1 " placeholder="Password ">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    Login or Signup to reply.
  2. 0

    Its the way you are nesting row withing row. on a device greater than lg, both columns col-lg-2 & col-lg-10 will be on the same row enough width is available for both cols to occupy. but for less size one row will be for col-lg-2 and next for row for col-lg-10. so better close first row for col-lg-2 and use another row for next col-lg-10 to preserve the consistency on every devices.

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
        </div>
    </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search