CODEWITHSUNDEEP
twitter-bootstrap-3
Tshon
Tshon

Reputation: 13

bootstrap 3 grid sizes not changing col-xx-x

Guys I am unable to get the responsive grid to work properly. I have several columns that I would like to change as the screen size adjusts. I am only testing this in my browser (safari & firefox) on my desktop. what I have tried is using col-xs-3 col-sm-2 col-lg-1 and I only get col-xs-3 no matter what i do to the browser size. Any thoughts?

HTML

<!DOCTYPE html>
<html lang="en">
<head>    
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class=container-fluid>
  <h1><strong><center>Hello World!</center></strong></h1>
  <div class=row>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
    <div class=col-xs-3 col-md-2 col-lg-1>
      <a href="#" class="thumbnail">
             <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
    </div>
  </div>
</body>
</html>

CSS

body {
    background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;}

.thumbnail {
   opacity: 0.1;     
}
.thumbnail:hover {
   opacity: 0.6

}

Upvotes: 1

Views: 643

Answers (2)

OlivMertens
OlivMertens

Reputation: 134

You have to put your style inside your body and close your brackets Look a your code now : Codepen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<body>
  <div class="container-fluid">
    <h1><strong><center>Hello World!</center></strong></h1>
    <div class=row>
      <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
      <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
       <div class="col-xs-3 col-md-2 col-lg-1">
        <a href="#" class="thumbnail">
          <img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
        </a>
      </div>
    </div>
    
 <style>
body { background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color:#fff; background-color:#333; font-family: 'Open
Sans',Arial,Helvetica,Sans-Serif;} .thumbnail { opacity: 0.1; } .thumbnail:hover { opacity: 0.6 }</style
</body>

</html>

Upvotes: 1

Nick Albrecht
Nick Albrecht

Reputation: 16948

You're missing the enclosing quotes on a lot of your HTML attributes. Specifically, your class attributes, hence why only the first one is taking effect. Good practice is to always wrap your attributes in quotes.

Upvotes: 1

Related Questions