CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
user2948246
user2948246

Reputation: 77

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?

Upvotes: 0

Views: 64

Answers (4)

AntonS
AntonS

Reputation: 341

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>

Upvotes: 0

Pixelomo
Pixelomo

Reputation: 6737

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

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7691

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>

Upvotes: 3

sydev
sydev

Reputation: 115

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

Upvotes: 1

Related Questions