Align items vertically in the center using Bootstrap 4

Is there a way to center text in a dropdown menu navbar?

Here is the code I currently have:

https://i.sstatic.net/ERlR3.png

I've attempted different solutions but haven't had any luck.

<ul class="navbar-nav ml-auto">
    <li ngbDropdown class="nav-item dropdown">
        <a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>menu</span>
            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item">OPTION 1</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTON 2</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTION 3</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTION 4</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTON 5</a>
            </div>
    </li>
</ul>

This snippet shows my current attempt:

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To style your dropdown-item, you can use the following CSS code or apply the classes 

d-flex justify-content-center align-items-center
to each dropdown-item.

.dropdown-item {
    display: flex;
    justify-content: center;
    align-items: center;
}


.dropdown-menu hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu a {
  height: 53px;
}

.dropdown-item {
  text-align: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #F3F3F3;
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<ul class="navbar-nav ml-auto">
  <li ngbDropdown class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>menu</span>

      <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 1</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 2</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 3</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 4</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 5</a>
      </div>
    </a>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcbd4cbcbdec995d1c8fb8a958a8d958b">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

In PHP/HTML, if the URL is domain.co.uk/?debug, then the following action will

Apologies for what may seem like a basic question, but I've been searching for a clear answer with no luck! My goal is simple - when someone goes to , I want to show extra details, like the code version or any other notes I include. Once again, sorr ...

phpjavascripthtmldebuggingurl

How can I make the columns in my table stand out with different background colors?

I'm currently working on implementing alternating background colors for columns in a table. I have successfully applied CSS to a simple table, but I am facing issues when dealing with more complex tables that involve rowspan and colspan. Can anyone of ...

htmlcsscss-tables

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

htmlcsssass

Highlighter for HTML - Prism

I have been using Prism for styling CSS and it's working well: <pre><code class="language-css">p { color: red }</code></pre> However, I am facing issues with highlighting HTML code: <pre><code class="language-html"& ...

htmlsyntax-highlightingprism.js

When making a request for "/example.php/" the CSS does not seem to take effect, however, the content is displayed properly

Currently, I am working on a PHP script where I have divided each section into separate .php files and included them using the include() function. Here is an example of how everything is set up in different folders: header.php footer.php etc.. When acc ...

phphtmlcss.htaccessurl

Wrapping header text in Vuetify's v-data-table

Struggling with wrapping the header text on a v-data-table component. I've tried applying styles, but only tbody elements are affected. The header (thead element) remains unchanged. Any suggestions on how to get custom styling for the header? For ins ...

cssvue.jsvuetify.js

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

htmlreactjsnext.jsnext.js13nextjs-image

Achieve vertical scrolling within a div of a set width employing CSS

My situation involves a fixed size div that is 500px in dimensions. Inside this div, there is a smaller div. However, as the number of divs increases, it starts to display a horizontal scroll. I am aiming for a vertical scroll instead. I attempted to resol ...

htmlcssuser-interfacewebvertical-scrolling

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

What is the process for including points to the scoreboard?

I am currently working on a simple JavaScript game as my very first project. The game involves clicking a button to generate random numbers for both the user and computer, and the winner is determined by the larger number. I have set up a scoreboard to kee ...

javascripthtmlcssif-statement

Align the single element to the right

Is there a way to right align a single element within a dropdown list using Bootstrap 5? I typically use "justify-content-end" for this purpose, but it doesn't seem to work in this case. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn- ...

htmlcsstwitter-bootstrapalignmentbootstrap-5

Empty array returned when using wrapper.classes() with Vue-test-utils and CSS modules

Recently I started using Vue Test Utils along with CSS Modules. My Vue component is all set up with CSS Modules and it functions perfectly in the app as well as in Storybook. Take my BasicButton for example: <template> <button :class="[ ...

cssvue.jsjestjsvue-test-utilscss-modules

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

How to extract text from an HTML file using Bash programming

I have a script that navigates through my data directory and retrieves text from HTML files using the Lynx tool. However, when I view the text file generated by the script, it displays an error message: 410 GONE This doesn't exist any more. Try html ...

htmlbashlynx

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

javascripthtmlcssreactjs

The mat-select choices are experiencing rendering issues

This is the HTML code I am using to display select locations and a map below it: Here is the HTML code for the above view, <mat-form-field class="locationSelector"> <mat-select placeholder="Choose location" (ngModel)="ServiceLocations"> ...

cssangularangular-materialangular-google-maps

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

htmlcss

Experience the smooth glide on a CSS image

I am looking to add a unique animation to my menu, specifically a slide-down color effect instead of the typical fade transition on the first two divs. I envision it as a curtain-like animation. When hovering over an image, I want a colored panel to smoot ...

htmlcssanimationyui-pure-css

Is there a PHP equivalent of a jQuery-style interface available?

Is there a PHP library available that offers a jQuery-style interface for working with HTML/XML files, particularly using jQuery-style selectors? I am interested in performing tasks like the following examples (purely hypothetical): foreach (j("div > ...

phpjqueryhtmlxmlhtml-parsing

Seeking assistance from experienced individuals! Issue with countdown timer functionality in JavaScript

Hey there! I recently started my journey in learning HTML and wanted to create a timer for my website. Although the timer is displaying, the numbers are not showing up and it's not functioning properly. I would really appreciate some assistance from ...

javascripthtmlcountdowntimer