You have the option to include a border on the right and remove the border for the last child element. Additionally, if you do not want the border to appear on smaller devices, you can eliminate it altogether.
See the example below.
li.nav-item {
border-right: solid 1px #000;
}
li.nav-item:last-child {
border-right: solid 0px #000;
}
@media only screen and (max-width: 991px) {
li.nav-item {
border-right: solid 0px #000;
}
}<link href="https://cdn.jsdelivr.net/npm/somefile/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/someotherfile/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/yetanotherfile/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>I have been encountering an error every time I try to input these values into the database. I suspect that the issue lies within this section of the code, but I am unable to pinpoint it. Can someone please assist me in identifying and resolving the error ...
I have been attempting to dynamically append content to a specific div using .ajax() and then utilize the new content within a jQuery Dialog. I believe that my usage of .on() is correct, but it appears that the DOM is not being properly updated. Here is t ...
My collection of artwork can be found on my website www.unlicensedeyesurgery.com. However, I am facing an issue with the Lightbox code that is being used. The problem lies in the fact that the Lightbox code utilizes the rel attribute of the anchor tag to d ...
Examining some CSS code and came across this: .head{ position:relative; overflow:hidden; margin:-30px 0 0 -25px; width:820px; padding:20px 25px 0 25px; background:url(/images/bkg.gif) 0 0 no-repeat; } What's the reason behind using -30px and -25px m ...
I've been working on incorporating schema.org tags into my website, specifically for a Q&A page. However, I'm encountering issues when trying to add all three tags within the same HTML page - they seem to be overlapping. My goal is to structu ...
Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...
At the moment, my code looks like this: @Html.DisplayFor(m => m.EventDetailSection.ContactAccountTel), which displays the phone number without any spaces, such as +3194949494. I want to format it with spaces after every 2 numbers and then after every ...
const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...
I am encountering a JavaScript exception related to image size. I am trying to set a fixed size for the images in my carousel, allowing them to auto adjust or resize without concern for distortion or pixelation. I have experimented with max-width and widt ...
When moving through form elements or anchors using the tab key (and shift + tab), the browser automatically scrolls to the focused element. If the element is not visible due to being part of overflow content with a hidden overflow setting, the container&ap ...
Take a look at these two screenshots that illustrate the issue: The first screenshot demonstrates the correct behavior - the fullscreen mode works perfectly. However, in the second screenshot, a problem arises. Depending on the size of the browser window, ...
I'm currently working on a Bridgetown website using Bootstrap 5, and I've encountered an issue with adding an image that won't show up on the site. This is what it currently looks like: https://i.sstatic.net/IUR7x.jpg Code <nav class=&quo ...
Hey there! I need some assistance with making my Chat site/application responsive. I'm not too familiar with CSS, but I'm the sole developer on this project, so I'm trying my best. I initially designed the site in Photoshop and then started ...
While working on coding a menu opening animation, I encountered an issue today. Upon clicking the menu button, the menu opens and the elements inside receive an added class (resulting in a fade-in effect). Clicking the menu button again should close the ...
I am looking to update the entire page content with the click of a button, transitioning from Words.html to SelectNumber.html This snippet is from Words.html <html> <head> <meta charset="UTF-8"> <title>Number Game< ...
I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...
$dd = "<a href='javascript:void(0);' id='requestsend$send_id' onClick='request($send_id,request_send);' class='post-add-icon inline-items'><button type='button' style='background: #ccc;' ...
There is currently a scrollbar displaying over part of my page when necessary. https://i.stack.imgur.com/48Rbx.png I want to change the styling of the scrollbar to make it less bright and have a transparent background. I attempted to apply some styles, bu ...
In Chrome and Firefox, the following code works fine and makes the container clickable. However, in Internet Explorer, only the inner div changes the cursor to indicate that it's clickable, not the span. I could use cursor:pointer to fix this issue, ...
Is it possible to display a specific portion of an image within a div that is 300*300px in size while maintaining responsiveness, using only HTML and CSS? The div always occupies 33% of the page width. Here is an example of my code: HTML <div class= ...