external style.css not working with bootstrap css

Question

I am new in HTML and CSS. There are two buttons named 'Click me' and 'reset' and I was trying to add a border around them but the result is not updating according to my style.css file.

.flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary">Click me</button>
    </div>
  <div>
  <button class="btn btn-danger">reset</button>
</div>

Akshay · Accepted Answer · 2020-09-26 07:27:31Z

It is working correctly. Make sure path of style.css is correct. Or simply add style in the html file itself. It will also reduce the number of files to be fetched from server.

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  />
  <style>
    .flex-box-container-1 {
     display: flex;
     border: 1px solid black;
     padding: 10px;
   }
 </style>
 <title>Challenges</title>

</head>
<body>
 <div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
    <div>
      <button class="btn btn-primary">Click me</button>
    </div>
    <div>
      <button class="btn btn-danger">reset</button>
    </div>
  </div>
</div>
<!-- <script src="static/JS/script.js"></script> -->
</body>
</html>

Hamza javed · Accepted Answer · 2020-09-26 07:49:24Z

1

It is working correctly. Make sure path of style.css is correct Sometimes your path is not hitting the proper directory user (@) symbol at the start of the path . Or simply add style in the html file itself like Akshay said. It will also reduce the number of files to be fetched from server.

answered Sep 26, 2020 at 7:49

Hamza javed

594 bronze badges

Comments

Rayees AC · Accepted Answer · 2020-09-26 07:28:51Z

It worked correctly. check the file location.

If you Add more class to override bootstrap. That is add style to .container-1 .flex-box-container-1

.container-1 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}

Using !important not good practice even when there are more ways.

It works for me in local file i tested compeletly.

Working Demo

.container-1 .flex-box-container-1 {
   display: flex;
   border: 1px solid black;
   padding: 10px;
}

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="static/style/style.css" />
<title>Challenges</title>
</head>
<body>
 <div class="container-1">
  <h2>Challenge 1: Your age in Days</h2>
  <div class="flex-box-container-1">
  <div>
    <button class="btn btn-primary">Click me</button>
  </div>
  <div>
    <button class="btn btn-danger">reset</button>
  </div>
</div>
</div>
<script src="static/JS/script.js"></script>
</body>
</html>

Collectives™ on Stack Overflow

external style.css not working with bootstrap css

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related