Custom styles not proper applied while using bootstrap

Question

I am making a webpage using both bootstrap and my own styles for css. When I try to change some of my styles, bootstrap seems to override some of them, such as removing line from nav bar or making the nav bar be full width. I am currently using the solution from: Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)? to make the nav into a full width.

This is my html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/index.css" type="text/css">

</head>
<body>
        <h1>Test</h1>
        <div id="main_nav">
        <div class="container-fluid" id="menu_container" style="max-width:100%;">
            <nav id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </nav>
        </div>
        </div>
</body>
</html>

This is my css:

h1{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    text-align:center;
    font-size: 85px;
    color: black;
  }

body{
  margin: 0px;
}

#main_nav {
 background-color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ff9900;
}

I am currently using Bootstrap 4.3.1 .

Hi, wouldn't setting styles to !important affect the whole flow of the css? — mmm000, Aug 04 '21 at 04:37

Pavan J · Answer 1 · 2021-08-05T04:43:44.940

1

If I were you, I would use css classes to overwrite styles instead of targetting html elements. This also gives us scope to improve specificity of CSS classes which is the best alternative to !important.

edited Aug 05 '21 at 04:43

answered Aug 04 '21 at 04:43

Pavan J

353
1
3
12

score -1 · Answer 2 · answered Aug 04 '21 at 04:43

You will need to apply important to your css elements.

h1{
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    text-align:center !important;
    font-size: 85px !important;
    color: black !important;
  }

body{
  margin: 0px !important;
}

#main_nav {
 background-color: #333 !important;
}

nav ul {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

ul {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #333 !important;
}

li {
  float: left !important;
}

li a {
  display: block !important;
  color: white !important;
  text-align: center !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
}

li a:hover {
  background-color: #ff9900 !important;
}

Custom styles not proper applied while using bootstrap

2 Answers2