flexible navigation bar with Bootstrap

I'm currently using Yamm with Bootstrap, but I'm encountering an issue where I need to make it flexible so that each list item will have the same spacing as the others. Additionally, I want to be able to add new list items in the future without disrupting the existing spacing. I've tried using display:flex, but it doesn't seem to have any effect. Can anyone provide some assistance?

Here is my code:

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
(remaining CSS code here)
(HTML code here)

Answer №1

If you want to utilize flexbox, make sure to include the display: flex property in the parent element's CSS.

Here is a simple example (the CSS rule for .col-xs-12 col-sm-6 col-md-3 is intentionally left empty to demonstrate that a specific CSS rule for the flex child is not necessary unless there is a styling requirement):

.col-md-12{
  display: flex;
  justify-content: space-between;
}
.col-xs-12 col-sm-6 col-md-3{

}
<div class='col-md-12'>
 <div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Computer</h2>
<ul class="links">
<li><a href="#" >Lenovo</a></li><!-- LOOPING -->
<li><a href="#" >Microsoft </a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Longsleeves</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Camera</h2>
<ul class="links">
<li><a href="#" >Fuhlen</a></li><!-- LOOPING -->
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>                   
<li><a href="#" >Longsleeves</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Apple Store</h2>
<ul class="links">
<li><a href="#" >Longsleeves</a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>                                       
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Smart Phone</h2>
<ul class="links">
<li><a href="#">Microsoft </a></li> <!-- LOOPING -->
<li><a href="#">Longsleeves</a></li>
<li><a href="#">"Fuhlen</a></li>
<li><a href="#">Lenovo</a></li> 
</ul>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

Is it possible for JQuery AJAX requests to activate Angular ng-click directives?

I've been working on a mobile application that uses a combination of JQuery and Angular. Every now and then, I encounter a strange bug. The Angular directives are implemented in a partial that is included through the ng-include directive: <ng-inc ...

tool for showcasing data on a webpage with a specific layout

Which chart library is best suited for presenting data in the formats shown in the images below? Can HighCharts handle these formats? Does Google Charts allow for a combination of bubbles and lines? ...

Tips for aligning an image in the middle of a column within an ExtJS GridPanel

My goal is to center the icon horizontally within the "Data" column: Currently, I have applied textAlign: center to the column: Additionally, I am using CSS in the icon renderer function to horizontally center it: Despite these efforts, the icon remains ...

Utilizing vanilla JavaScript or ES6 to extract data from a JSON file

I am currently working on an HTML project where I need to extract data from a JSON file that cannot be modified. I am looking to accomplish this using pure JavaScript or ES6, but I am struggling to make it work. Specifically, I am trying to retrieve a link ...

Guide to automatically refresh the source link every 5 seconds using a different .php link

Is there a way to automatically refresh the source link every 5 seconds in order to display an image from another page on index.php? On index.php <img id="img1" class="imgNews" src="https://example.com/car.jpg"> On other.php <span id="link1"&g ...

Using div tags as interactive buttons, as well as incorporating dynamic functionality such as delete and report spam options

In this practice test scenario, the objective is to log in to Gmail, click on all checkboxes in a dynamic web table, and delete the mails. Below is the code that I have created for this task. The issue arises when checking if the delete button is visible. ...

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

Changing the cursor on drag operation

Having trouble changing the cursor while dragging an object? I'm struggling to find a solution to change the cursor properly during dragging. My setup involves a React component where I attempted to change the cursor without success. Despite my effor ...

Ensuring Consistent Placement of Elements Regardless of Screen Size with CSS

I'm currently working on an Ionic App and I need to position some buttons (stacked vertically) at the bottom-left corner of the device's screen. Here is the CSS I am using: .button { left = "1em"; z-index = "13"; overflow = "scroll"; ...

Using Swift Mailer to add a subject to an email by including the 'mailto:' HTML tag

I am currently using Swift_mailer in PHP to send out automated emails. Recently, I have been tasked with enhancing the email messages by including contact information. To enable users to provide feedback, I want to utilize the html 'mailto' funct ...

Changing letter cases in a textbox using Javascript

I have a challenge to create a code that can switch the case of text entered by the user. Here is what I currently have: var num; function toggleTextCase(str) { return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase( ...

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

I have been working on a script for my PHP page in Wordpress to add titles to images in my photo gallery that open in a lightbox. Here's what I developed: $(".responsive1").bind("click", function() { $(this).("<div class='imgTitle ...

Tips for equalizing the height of inner DIVs within a container

Similar Question: How to maximize a floating div? Showing my HTML setup below: <div id="container"> <div id="sidebar"> left <br /><br /><br /><br /><br /><br /> ...

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

Ways to separate a portion of the information from an AJAX Success response

I am currently working on a PHP code snippet that retrieves data from a database as follows: <?php include './database_connect.php'; $ppid=$_POST['selectPatientID']; $query="SELECT * FROM patient WHERE p_Id='$ppid'"; $r ...

Struggling with navigating segmented dropdown buttons

I was following a tutorial on Udemy to learn about inputs and dropdown buttons for bootstrap. Everything was going well until I attempted to create a simple selection of albums for one of my favorite artists. The buttons kept separating when I tried to cen ...

Steps to assign a value to an input element using the state in a React application

Hey there, I hope everything is going well for you! I have a question regarding setting the value of an input field based on the state received from props. I've tried to populate the input with data from the "profile" state using placeholders, but it ...