Twitter Bootstrap Question posted in

Twitter bootstrap – Using bootstrap in HTML

I have recently started learning and practicing web development topics. I wanted to use bootstrap for things like responsive design, navigation bar and tables. I have downloaded twitter bootstrap. The files are stored on my desktop. When I try to include them in my project, I see that bootstrap has not been implemented.
Following is how I tried to implement it.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href ="css/bootstrap.min.css" rel="stylesheet" >
  <title>Portfolio</title>
</head>

<body>
  <div class="container">
     <div class="hero-unit">
       <h1>responsive layout</h1>
       <p>Hello World!</p>
       <p><a class="btn btn-primary btn-large">Super important &raquo;</a>         </p>
     </div>
  </div>
 </body>
</html>

Here I’m trying to create a responsive design but it doesn’t work when I re-size the window or when I change to other devices.
What am I doing wrong?

Tags:

4

Answers


  1. 0

    Try adding col-xs-12-class to your <div class="hero-unit">

    Login or Signup to reply.
  2. 0

    Just use Bootstrap CDN links. 

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    Your code:

    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" >

      <title>Portfolio</title>
    </head>

    <body>
      <div class="container">
         <div class="hero-unit">
           <h1>responsive layout</h1>
           <p>Hello World!</p>
           <p><a class="btn btn-primary btn-large">Super important &raquo;</a>         </p>
         </div>
      </div>
     </body>
    </html>
    Login or Signup to reply.
  3. 0

    Using the CDN like Srinivas Pai recommended is the easiest and in some ways the best way to get started with bootstrap, but the reason it wasn’t working may be down to filepaths you’ve specified. Is the CSS folder on your desktop or is it within your bootstrap folder? if so then you’ll need a '/' before css/bootstrap.min.css

    Login or Signup to reply.
  4. 0

    All of solutions which posted here should work. But if you are using the latest version of bootstrap you probably should replace ‘hero-unit’ to ‘jumbotron’. (Looks like these no ‘hero-unit’ class anymore.)

    http://getbootstrap.com/components/#jumbotron

    <div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search