CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Al Foиce ѫ
Al Foиce ѫ

Reputation: 4315

CSS Bootstrap: an horizontal scrollbar appears

I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:

nav{
  background-color: lightblue;
}
section{
  background-color: lightgreen;
  }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
</div>

An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?

Upvotes: 5

Views: 12357

Answers (5)

Valerii Manchynskyi
Valerii Manchynskyi

Reputation: 1

Add a wrapper around the .row with the .overflow-hidden class:

<div class="container overflow-hidden">

Upvotes: 0

Neelam Khan
Neelam Khan

Reputation: 1121

You are missing the container class within your HTML markup, it needs to be:

<div class="container">
   <div class="row">
      <div class="col-sm-12">
      </div>
   </div>
</div>

Here is your code with the container class added:

nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
   <header class="page-header"></header>
    <div class="container">
      <div id="mainContainer" class="row">
        <nav class="col-sm-12 col-md-2">
           <ul class="nav nav-pills nav-stacked">
              <li>Home</li>
              <li>Menu item 1</li>
              <li>Menu item 2</li>
            </ul>
        </nav>
       <section class="col-sm-12 col-md-10">
         Here is my content.
       </section>
      </div>
    </div>
   </div>

Upvotes: 3

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

You need a use .container for a responsive fixed width Container. Add this class to your div

<div id="mainContainer" class="row container">

enter image description here

  • Use .container for a responsive fixed width container.
  • Use .container-fluid for a full width container, spanning the entire width of your viewport.

Upvotes: 9

Taniya
Taniya

Reputation: 550

Remove the class 'row' form :

<div id="mainContainer" class="row">

Upvotes: 0

Jeroen
Jeroen

Reputation: 1166

I believe you forgot your container.

nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div class="container">
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
  </div>
</div>

Upvotes: 3

Related Questions