Twitter Bootstrap Question posted in

Why is my jumbotron not the same width as my responsive table in the panel beneath?-Twitter bootstrap

Here’s my layout sample on bootply

Does this require a CSS ‘hack’ or did I get my markup wrong to begin with?
(or, is this the default intended Twitter bootstrap design)?

Tags:

2

Answers


  1. 0

    This is what a default Jumbotron looks like. I’m not sure why you didn’t just check the Bootstrap documentation to see their basic example?

    Edit: The reason why your Jumbotron isn’t the same width is because your table is wrapped in a .row class which has margin-left: -15px & margin-right: -15px applied to it.

    To fix your issue, wrap your .jumbotron in a <div class="row"></div>

    You should always place your elements within a column though. e.g. .row > .col-sm-12 > .jumbotron

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
 <div class="container">
  <h1>Hello, world!</h1>
  <p>This is a lead</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
 </div>
</div>
    Login or Signup to reply.
  2. 0

    Just put the jumbotron in a row div:

    <div class="row">
   <div class="jumbotron">
     .....
     .....
   </div>
</div>

    OR use css to increase the width and adjust the position like: 

    <div class="jumbotron" style="width:102%; margin-left:-1%">
  ....
  ....
</div>

    (not recommended)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search