How can I display my collapsed navbar in 2 columns using Bootstrap 4?
Here is what the fullsize navbar looks like:
And here is the collapsed navbar:
Does anyone know an easy way to make the collapsed navbar with 2 columns so that every list item is shown? For example, displaying 5 items on the left and 5 on the right side.
Any help would be greatly appreciated. Thank you!
To implement a flexible navigation menu, utilize the built-in flex properties in CSS to arrange menu items as flex elements.
For the navigation bar with the class .navbar.nav, apply the following additional classes:
.flex-row
This ensures that the elements are displayed horizontally in a row rather than vertically in a column.
.flex-wrap
The flex-wrap class allows the navigation element to wrap its children if necessary.
Furthermore, each .nav-item should have col-6 to split them into two columns.
<ul class="navbar-nav mr-auto flex-wrap flex-row">
<li class="nav-item active col-6">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item col-6">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item col-6">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Make sure to adjust the markup for different screen sizes and breakpoints.
Utilizing bootstrap, I have implemented two div elements in my HTML code: <div class="container"> <div class="col-12 circle lg-circle"> <div class="col-12 circle sm-circle"> </div> </div> </div> The corresp ...
Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...
My goal is to transition buttons from opacity 0 to opacity 1 with a delay, but I am facing an issue. Some of these buttons have the "selected" class which gives them an opacity of 0.35. However, when the transition starts, the buttons with the "selected" c ...
Can you help me achieve my goal of having the image pop up when a user clicks on it in the carousel? I'm not sure how to do it. Any suggestions? <div id="myCarousel" class="carousel slide" data-interval="false" > ...
I have a straightforward project in NextJs and I am looking to serve the files via NginX. Here are the dependencies listed in my package.json file: "dependencies": { "isomorphic-unfetch": "^2.0.0", "next": "^7.0.2", "next-routes": "^1.4.2", ...
Seeking guidance on changing the color of the last digits of a number if it ends in a zero or more. For instance, transform 0.50 to 0.50, 10.00 to 10.00, 10,000.00 to 10,000.00, 100,050.00 to 100,050.00, and the like. Any assistance in achieving this would ...
My website displays a background image in both Safari and Firefox, but for some reason Google Chrome is not showing it. I am unsure why this is happening. Do you have any insights on what I might need to adjust? renderer = new THREE.CanvasRenderer(); ren ...
I'm facing an issue with my innerHTML output where it seems to be displaying one less value than expected from the array. I've been unable to pinpoint the exact problem. await fetch(urlbody, bodyrequestOptions) .then((response) => response ...
I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it mor ...
In the parent div, there is a div and a textarea. I am attempting to synchronize the scrollTop value of the textarea with the div so that they move together when scrolling. The issue arises when I input text into the textarea and hit enter for a new line. ...
I am in the process of creating an image map, where I specify coordinates on an image that link to other pages. However, I'm encountering an issue where the position of these coordinates is not relative. When viewing the image on a different browser ...
Is there a way to show Font Awesome icons in select options tag? I have tried using it outside like this <i class="fas fa-chart-pie"></i> But I'm not sure how to display it within the <option> tags instead of text. <select id="s ...
Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...
Why am I unable to apply margin to my a links within the div identified by id="menu". I can successfully implement margin-left, but when attempting to use margin-top or margin-bottom, it does not work as expected. I wish to adjust the position o ...
I am looking to convert an Html page to pdf, but the HtmlPage contains many unclosed tags like: < hr > < br > Because of these unclosed tags, I am unable to create a Pdf. Is there a way to close these tags using HtmlUnit in Java? What I need ...
I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...
Is it possible to use two different <thead>'s in the same table but have them stacked neatly? Currently, the first heading has 1 fewer column than the second one, resulting in a slightly awkward appearance. If there is a way to extend that first ...
Is it possible to dynamically change the link of a navigation button based on the entered URL? For example: If the original link for a button is 123.com on the website xyz.com, I would like the link to automatically adjust based on the specific URL enter ...
I prefer using HTML over XHTML, but for some reason VS2008 is forcing me to use it. Whenever I type < br in an ASPX file, it automatically changes to < br /> Normal HTML4.01 does not have these auto-completions. Is there a way to disable this a ...
Currently, I am attempting to import the table from the link below into my database: This involves downloading the page as an HTML file through VBA and then creating a linked table. Although the manual download via Chrome works perfectly using the "Downl ...