CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dimytro Karpus
Dimytro Karpus

Reputation: 13

Bootstrap doesn't work on page

My html page doesn't work properly but bootstrap shoud make it working same as i want.I download bootstrap and include css file to page with font-awesome.min.css from font-awesome page. Also Im make sure that i all write properly. Im watch to console and dound that my files dont include to page. If you have some question you can ask me in comments.

And here is my code: 

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway');
body {
  background-color: #f2f2f2;
  font-family: "Lato";
  font-weight: 300;
  font-size: 16px;
  color: #555;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  margin-top: 60px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Raleway;
  font-weight: 300;
  color: #333;
}

p {
  line-height: 28px;
  margin-bottom: 25px;
}

.centered {
  text-align: center;
}

a {
  color: #f85c37;
}

a:hover,
a:focus {
  color: #7b7b7b;
  text-decoration: none;
  outline: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0px;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

.navbar {
  font-weight: 800;
  fin-sise: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-inverse {
  background: #2d2d2d;
  border-color: #2d2d2d;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap сайт</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
      </div>
      <div class="navbar-collapse collapse">
        <!--class="navbar-collapse collapse"-->
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Домой</a></li>
          <li><a href="#">Про нас</a></li>
          <li><a href="#">Сервсиы</a></li>
          <li><a href="#">Работы</a></li>
          <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 8996

Answers (2)

Jake Brown
Jake Brown

Reputation: 11

You had some tags important tags missing in the document. All fixed for you: 

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
            </div>
            <div class="navbar-collapse collapse">
                <!--class="navbar-collapse collapse"-->
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Домой</a></li>
                    <li><a href="#">Про нас</a></li>
                    <li><a href="#">Сервсиы</a></li>
                    <li><a href="#">Работы</a></li>
                    <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 1

Asifuzzaman
Asifuzzaman

Reputation: 1783

Hello Try The code below I think Its Working .

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway');

body {
    background-color: #f2f2f2;
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color:#555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling:touch;

    margin-top:60px;
}

h1, h2, h3, h4, h5, h6{
    font-family: Raleway;
    font-weight: 300;
    color:#333;
}

p{
    line-height:28px;
    margin-bottom: 25px;
}

.centered{
    text-align: center;
}

a{
    color:#f85c37;
}

a:hover, a:focus{
    color:#7b7b7b;
    text-decoration: none;
    outline: 0;
}

hr{
    display:block;
    height:1px;
    border:0px;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0;
}

.navbar {
    font-weight: 800;
    fin-sise:14px;
    padding-top:15px;
    padding-bottom:15px;
}

.navbar-inverse {
    background: #2d2d2d;
    border-color:#2d2d2d;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
 @import url('https://fonts.googleapis.com/css?family=Lato|Raleway');

body {
    background-color: #f2f2f2;
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color:#555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling:touch;

    margin-top:60px;
}

h1, h2, h3, h4, h5, h6{
    font-family: Raleway;
    font-weight: 300;
    color:#333;
}

p{
    line-height:28px;
    margin-bottom: 25px;
}

.centered{
    text-align: center;
}

a{
    color:#f85c37;
}

a:hover, a:focus{
    color:#7b7b7b;
    text-decoration: none;
    outline: 0;
}

hr{
    display:block;
    height:1px;
    border:0px;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0;
}

.navbar {
    font-weight: 800;
    fin-sise:14px;
    padding-top:15px;
    padding-bottom:15px;
}

.navbar-inverse {
    background: #2d2d2d;
    border-color:#2d2d2d;
}
</style> 
  
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PR<i class="fa fa-circle"></i>GER</a>
      </div>
      <div class="navbar-collapse collapse"> <!--class="navbar-collapse collapse"-->
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">?????</a></li>
          <li><a href="#">??? ???</a></li>
          <li><a href="#">???????</a></li>
          <li><a href="#">??????</a></li>
          <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
  </div>

</body>
</html>

Upvotes: 0

Related Questions