Snippet of HTML code:
<div class="container">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
The following CSS files are employed:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" type="text/css" />
I suspect there may be a conflict with my custom-defined CSS file main.css, where the rules include:
*{
box-sizing: border-box;
}
body{
margin-top:0;
font-family: arial;
background-attachment: fixed;
background-position: right top;
background-repeat: no-repeat;
background-size:200px 200px;
margin-left:210px;
margin-bottom:0px;
}
body.RNG{
background:url("https://cdn1.dotesports.com/wp-content/uploads/2018/08/11095313/c55eb912-0c91-4d9d-a228-b26b6f12fc4b.jpg") center fixed no-repeat;
background-size:cover;
background-color: rgba(255,255,255,0.5);
background-blend-mode: lighten;
}
/* Various other CSS rules */
footer{
width:100%;
height:30px;
margin-left:-10px;
padding: 10px 0 0 0;
text-align: center;
bottom:0px;
color:white;
background: grey;
margin-bottom:0px;
}
Upon removing the inclusion of main.css, the code operates as expected. This suggests that the issue lies within this specific stylesheet. However, I am unsure of the precise cause and how to rectify it.
Do you believe my assumption is accurate? I find myself puzzled by the underlying reason, as I anticipated that Bootstrap's rules would take precedence due to its specificity over the classes compared to those in main.css.