CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Deepak
Deepak

Reputation: 1545

class="jumbotron" in bootstrap not working

This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My first Bootstrap website!</h1>
        <p>This page will grow as we add more and more components from Bootstrap...</p>
      </div>

      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="./js/bootstrap.min.js"></script>
  </body>
</html>

I am attaching the image of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.

Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.

Upvotes: 1

Views: 14725

Answers (3)

Muhammad Muneeb Waqas
Muhammad Muneeb Waqas

Reputation: 197

Jumbotron has become obsolete in bootstrap 5, so you cannot use it. Instead, you have to make your own version of jumbotron. You can use the following piece of code:

<div class="mt-4 p-5 bg-primary text-white rounded">

Upvotes: 1

Joaquin Guerrini
Joaquin Guerrini

Reputation: 1

Try to use

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

in your HTML head.

Upvotes: 0

pcarranz
pcarranz

Reputation: 26

Try:

<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">

without the ./ instead.

or the CDN:

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


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions