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>
3 answers
solution1
1 2020-09-26 07:27:31
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>
solution2
1 2020-09-26 07:49:24
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.
solution3
0 2020-09-26 07:21:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.