Using bootstrap in HTML

Question

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?

Shrinivas Pai · Accepted Answer · 2015-08-05 16:27:14Z

3

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>

answered Aug 5, 2015 at 16:27

Shrinivas Pai

7,7414 gold badges32 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Philp Over a year ago

definitely the best and easiest solution for small projects

sydev · Accepted Answer · 2015-08-05 16:24:58Z

1

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

answered Aug 5, 2015 at 16:24

sydev

1151 silver badge8 bronze badges

Comments

Pixelomo · Accepted Answer · 2015-08-05 16:31:38Z

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

answered Aug 5, 2015 at 16:31

Pixelomo

6,8354 gold badges49 silver badges62 bronze badges

Comments

AntonS · Accepted Answer · 2015-08-05 16:44:30Z

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>

answered Aug 5, 2015 at 16:44

AntonS

3411 silver badge8 bronze badges

Collectives™ on Stack Overflow

Using bootstrap in HTML

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related