Dividing and arranging dropdown list items into two columns using Bootstrap - An easy guide

How can I split a dropdown ul>li list into two columns using Bootstrap?

I am attempting to divide the ul>li into two columns, with one aligning to the left and the other to the right.

This is how I am currently doing it: 

<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span></button>
<ul class="dropdown-menu text-left">
    <li><a href="#">full name must align to left <span class="text-right">short name - align to right</span></a></li>
    <li><a href="#">left <span class="text-right">right</span></a></li>
    <li><a href="#">left<span class="text-right">right</span></a></li>
    <li><a href="#">full name must align to left <span class="text-right">short name - align to right</span></a></li>
</ul>
</div>

http://jsfiddle.net/W55vP/

However, everything is currently aligned to the left. What can I do to split the ul>li> hyperlinks into two columns so that one half aligns left and the other half aligns right?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Below is the solution, please click on the following link:

HTML Code:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Multicolumn</a>
  <div class="dropdown-menu" role="menu">
      <ul>
          <li><a>one</a></li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
      </ul>
      <ul>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
      </ul>
      <ul><li>eight</li>
          </ul>
  </div>
</div>

CSS Code:

.dropdown-menu ul {
    float: left;
}

.dropdown-menu ul:first-of-type {
    border-right: 1px solid black;
    padding-right:20px
}

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

Experiencing excessive memory usage when attempting to load a large JSON file in Firefox

We are in the process of developing a client-based application using HTML5 and indexedDB on Firefox 28. When large amounts of data are loaded to Firefox for the first time using AJAX requests in JSON format, each JSON response is approximately 2MB (gzipped ...

javascriptjqueryajaxjsonfirefox

Choose the CSS class based on the content provided

Help needed with CSS issue. I want to target the <tr> element's class using Bootstrap classes like .success or .danger. In my Vue.js project, the status name in my object does not align with the .success or .danger classes, but I still need to ...

javascriptcsstwitter-bootstrapsassvue.js

Incorporate a JavaScript variable into an HTML href link for dynamic web content

This is a snippet from my code: <p id="demo">{$value.file_name}</p> <script type="text/javascript"> var str = document.getElementById("demo").innerHTML; var res = str.replace("/var/www/html/biology/demo", ""); document.getElementById(& ...

javascriptphphtmlvariables

Uncovering the key based on the value in MongoDB

I'm currently working with Node.js using the express framework and Mongoose for MongoDB, and I've got a query regarding efficient data retrieval. Imagine having a mongo document structured like this: test : {a:1, b:2, c:2, d:1}; While it' ...

javascriptnode.jsmongodbexpressmongoose

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Eliminate the table background effect on hover using HTML and CSS

If you need assistance with a contact form, please visit this link. There seems to be an issue with the hover effect on the fields causing them to turn dark grey. This may not align with your desired plain white background. You can view a screenshot https ...

htmlcss

Is it necessary to specify the inputs property when defining an Angular @Component?

While exploring the Angular Material Button code, I came across something interesting in the @Component section - a declared inputs property. The description indicates that this is a list of class property names to data-bind as component inputs. It seems ...

javascriptangulartypescriptangular-material

Utilizing a segment of one interface within another interface is the most effective method

In my current project using nextjs and typescript, I have defined two interfaces as shown below: export interface IAccordion { accordionItems: { id: string | number; title: string | React.ReactElement; content: string | React. ...

javascriptreactjstypescriptnext.jsinterface

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

When creating a custom validation function in Angular, I encountered an issue where using a variable within the validation would result in an error: "ERROR TypeError: Cannot read properties of undefined (reading 'file')". This occurred when chang ...

javascriptangulartypescriptasynchronouscustomvalidator

Typescript restricts dynamic property access within objects

I'm encountering some difficulties while attempting to access my object property in TypeScript: const sum = (type: string) => { return { status: 'Sum', value: data?[type].sum, }; }; sum('first') Here is a glimps ...

javascripttypescript

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

Load data from a MySQL Database into a DataTable

I am currently in the process of developing a CRUD application. With a large dataset stored in a MySQL database, my intention is to utilize a JQuery DataTable instead of manually creating a table. However, the issue I am facing is that while the table appe ...

javascriptjquerymysqldatatables

Vue.js error: Unable to locate requested resources

Recently, I've been encountering a curious issue when trying to access a specific component in my application. When I manually type the URL http://localhost:8080/detailed-support/start into the browser, the content loads without error. However, none o ...

javascripthtmlvue.js

What is the best way to display converted value in Angular 8?

In my current project, I am utilizing .NET Core 2.2 for the backend and Angular 8 for the frontend. The scenario involves having integer values on the backend within a specified range. For example: [Required] [Range(1073741824, 1099511627776)] // ...

javascriptc#angulartypescriptasp.net-core

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Let's consider a scenario with a button in our code: <button type="button" class="menu-button" [disabled]="isInvalidForm()">Save</button isInvalidForm() { console.log('I am running!'); return this.nameValidator.errors || this.last ...

htmlangularfrontendweb-frontend

Is there a way to trigger the activation of the datepicker during the `onLoad` event?

For my project, I am utilizing this datepicker. While I am familiar with using scripts to handle changes in the date value, I am unsure of how to implement it on page load. $('.date_set .date').datepicker({ startView : 0, ...

javascriptjquerydatepicker

Expansion Issue: Div in Main Section Not Adapting to Parent Width in Bootstrap Flex Layout

I have a Bootstrap 5.2 header/main/footer layout where I want the main section to expand and fill the page between the header and footer completely. The code below is currently working: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcssflexboxbootstrap-5

Get all text that comes after a closing tag up to a designated tag using JSOUP

I have this snippet embedded within a plethora of table rows in a table: ......... <tr class="greycellodd" align="right"> <td align="left"> <input type="checkbox" name="cashInvestment" value="100468057"/> </td> <td align="left"& ...

htmlparsingtextextractjsoup

Is there a way to personalize the link in a Cognito confirmation email?

Users who register through my application will receive an email from Cognito containing a verification link. AWS Cognito offers a template ({## text ##}) that will be converted into a link, such as <a href='link-to-confirm'> text </a> ...

htmlamazon-web-servicesemailamazon-cognito

Ways to retrieve json_decode() information following ajax transmission

Currently experimenting with an ajax script to enhance my skills in ajax. I am using the serializeArray() method to submit a form via ajax, however, although I can successfully pass the data, I am unable to perform any operations on it. var submit_post = ...

phpjqueryajax