CODEWITHSUNDEEP
twitter-bootstrapresponsive-designmedia-queries
cfz
cfz

Reputation: 343

bootstrap sidebar and content width

i'm a beginner in creating responsive template and i want to create a layout with bootstrap application like this site http://wrapbootstrap.com/preview/WB0F35928

the main div would be sidebar and content div which looks like the site i've stated above,

the problem is when i applied it on my own page, the responsive part does not function, it's just like a normal not responsive template. I already have all the js requirements for a responsive template yet it still does not work.

here's my html code:

 <div class="sidebar">
  <ul style="background:#aaa; margin-left:0 !important;">
    <li>list1</li>
    <li>list2</li>
  </ul>
</div>

<div class="content">
  <div class="container-fluid"> 
      This is a sample content
  </div>
</div>

css: 

.sidebar{
display:block;
 }
.sidebar > ul{
margin:10px 0 0;
padding:0;
position:absolute;
width:220px;
}
.content{
margin-right:0;
margin-left:220px;
min-height:740px;
padding-bottom:0 !important;
position:relative;
width:auto;
background:#fff;
}

in bootstrap-responsive.css I put this:

@media (max-width: 767px){
 .content{
   margin-left:0 !important;
 }
}
@media (max-width: 767px){
 .sidebar{
   float:none;
   width:100%;
  }
 .sidebar > ul{
   width:100%;
   position:relative;
 }
}

Upvotes: 0

Views: 1350

Answers (1)

Michael Freake
Michael Freake

Reputation: 1207

For twitter bootstrap to be responsive, you must use the not only the bootstrap JS and css files, but you must also use the responsive css file as shown below:

<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/AgTracker/resources/css/bootstrap-responsive.min.css"/>

Are you using these two files? Refer to here for more details.

Upvotes: 1

Related Questions