CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
J.Zil
J.Zil

Reputation: 2449

Bootstrap columns taking up more width than they should

I am using bootstrap and I can't understand why my columns are expanding off the page when they should equal the right amount (8+4).

This is a demonstration of what I mean: http://jsfiddle.net/52VtD/7440/embedded/result/

Can anyone tell me what I have done wrong please? I feel the container inside the 4 width column might be the issue.

Full code: 

<div class="container container-default">
      <div class="col-md-12">    <h3>Support</h3></div>

     <div class="col-md-8">
  <div class="panel panel-default">
    <div class="panel-heading">Common Questions</div>
  <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info1">
      Linked item in .list-group
      <div id="info1" class="collapse">More Info #1</div>
    </a>    
    <a href="#" class="list-group-item" data-toggle="collapse" data-target="#info2">Linked item in .list-group with Chevron and Badge
      <div id="info2" class="collapse">More Info #2</div>
    </a>    
  </div> 
  </div>   
  </div>     
       <div class="col-md-4">
<div class="container">
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
            </fieldset>
        </div>
    </div>
</div>    
   </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://employ.github.io/js/bootstrap.min.js"></script>


</div></div>

Upvotes: 2

Views: 2017

Answers (2)

Stephan Wagner
Stephan Wagner

Reputation: 990

You have a container class in col-md-4. Remove this one and it will work.

Also, your code in general is messed up. Try to use the bootstrap grid system:

http://getbootstrap.com/css/#grid

In your example:

<div class="container">
    <div class="row">
      <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
</div>

Upvotes: 4

Webice
Webice

Reputation: 592

It is that code !

    <div class="col-md-4">
<div class="row">
    <div class="panel panel-default">
        <div class="panel-heading">Contact Us</div>
        <div class="panel-body">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md"> <span class="help-block">help</span> 
                </div>
                <!-- Textarea -->
                <div class="form-group">
                    <textarea class="form-control" id="message" name="message">default text</textarea>
                </div>
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
            </fieldset>
        </div>
    </div>  
   </div>

dont use Container in Row.

Upvotes: 3

Related Questions