CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Krishna
Krishna

Reputation: 21

bootstrap not working in html

The class "pull-left" doesn't work, the logo is not being floated to left and the background color of body tag is not visible as well? Can anyone explain where I am going wrong? The index.html file and bootstrap files are in the same directory. I checked the tags as well but could not find a typo.

body {
  font-size: 16px;
  font-family: font-family: 'Oxygen', sans-serif;
  background-color: #61122f;
  color: #fff;
}

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('https://scontent-sea1-1.cdninstagram.com/t51.2885-19/s150x150/17437826_285820131856427_2792512281873743872_a.jpg') no-repeat;
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 0;
}

.navbar-brand {
  padding: 25px;
}

.navbar-brand h1 {
  font-family: 'Lora', serif;
  color: #557c3e;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #222;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0.75;
}

.navbar-brand a:hover,
.navbar-brand a:focus {
  text-decoration: none;
}

.navbar-brand p {
  color: #000;
  text-transform: uppercase;
  font-size: .7em;
  margin-top: 15px;
}

.navbar-brand p span {
  vertical-align: middle;
}
<!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>David Chu's China Bistro</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet" type="text.css">
  <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css">

</head>

<body>
  <p></p>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="pull-left">
            <div id="logo-img" alt="Logo image"></div>
          </a>
          <div class="navbar-brand">
            <a href="index.html">
              <h1>David Chu's China Bistro</h1>
            </a>
            <p>
              <img src="https://www.davidchuschinabistro.com/images/star-k-logo.png" alt="Kosher Certification">
              <span>Kosher Certified</span>
            </p>
          </div>

        </div>
      </div>
    </nav>
  </header>
  <h1></h1>


  <!-- jQuery (bootstrap JS plugins depend on it) -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

Upvotes: 2

Views: 591

Answers (2)

Elvin Mammadov
Elvin Mammadov

Reputation: 1120

In bootstrap 4 pull-right, pull-left are changed with float-right, float-left.

Also your bootstrap css file conflict to other reboot.scss file that's you can't see your background color.

You can use css properties like this to resolve conflict:

body {
  font-size: 16px !importnat;
  font-family: 'Oxygen', sans-serif !importnat;
  background-color: #61122f !importnat;
  color: #fff !importnat;
}

There's the html tag where I changed pull-left class with float-left

<a href="index.html" class="float-left">
    <div id="logo-img" alt="Logo image"></div>
</a>

I hope it'll helps you

Upvotes: 1

Mohan Patil
Mohan Patil

Reputation: 81

In bootstrap 4 pull-right, pull-left are changed to  pull-sm-right

That is, pull-sm/xs/md/lg-left/none/right

Body background colour must have been applied.... It's just not visible because of height may be.. just check by specifying with a significantly larger height of body

Upvotes: 0

Related Questions