Switch the position of the bootstrap dropdown menu to a different side

How can I move the Bootstrap dropdown menu to the left side, as shown in the screenshot below?

Disregard the color differences in the code snippet and screenshots. https://i.sstatic.net/nrgHF.png

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

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<body>


      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle uppercase  outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
          <div class="dropdown-menu">
            <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
            <a class="dropdown-item uppercase" href="#">Company</a>
            <a class="dropdown-item uppercase" href="#">Our process</a>
            <a class="dropdown-item uppercase" href="#">Services</a>
            <a class="dropdown-item uppercase" href="#">Contact us</a>
            <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
          </div>
        </li>
        
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

csstwitter-bootstrapalignmentbootstrap-4

Answer №1

To implement a dropdown menu on the right side, you can use the class dropdown-menu-right...

Visit this link for a live example

<ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
                <a class="dropdown-item uppercase" href="#">Company</a>
                <a class="dropdown-item uppercase" href="#">Our process</a>
                <a class="dropdown-item uppercase" href="#">Services</a>
                <a class="dropdown-item uppercase" href="#">Contact us</a>
                <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
            </div>
        </li>
</ul>

For more information on creating Bootstrap 4 Navbar Dropdown Menu Items positioned to the right, check out: Bootstrap 4 Navbar Dropdown Menu Items Right

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

The background color is not displaying correctly on the <div> element

body { background-color: #FFFDEC; } .header { position: fixed; top: 0; left: 0; height: 50px; width: 100%; background-color: #04A7A6; margin: 0; display: block; z-index: 10; } .headermenu { xposition: fixed; ...

htmlcssbackground-color

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

Using the display property of inline-block in conjunction with PHP will lead to unexpected results (see screenshots provided)

I am in the process of developing an online store using PHP/SQL to showcase product information. I have applied a display: inline-block in the CSS, and it functions properly without PHP. However, when PHP is added, it seems to switch to a display: block e ...

phphtmlcsssql

Tips for manipulating rows in HTML using jQuery when the id attribute is added

Apologies in advance for any language errors in my explanation I am working on an input table where each row has a unique ID, and the input in each row affects the next row. As new rows are added, I have implemented an incremental numbering system for the ...

javascriptphpjquerybootstrap-4codeigniter-3

Is there a way to encase numerous <tbody> elements together?

My table design has specific css requirements where I am using multiple <tbody> tags. It looks like this: Example with multiple tbody tags However, I also need a wrapper for the multiple tbody tags (similar to a common tbody parent) that can be scr ...

htmlcss

Determining the best CSS based on the user's preferred color scheme using media queries

Is it possible to separate my CSS into two files, one for dark mode and one for light mode, and conditionally load them using only HTML without the need for JavaScript? I haven't been able to find any examples on https://developer.mozilla.org. Could ...

htmlcss

Changing the appearance of a radio button dynamically upon clicking

I am currently working on a dynamic pickup date form that utilizes radio buttons. My goal is to change the style of the selected value when a user clicks on it. Below is the code I have tried, but it has not been successful: foreach ($period as $day){ ech ...

jquerycssformsradio-button

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

jquerycssparallax

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

jqueryhtmlcss

The challenge of managing multiple navigation pills with data-toggle in the Bootstrap framework

I'm experiencing an issue on my page where multiple nav elements with the same class and id names are being cloned. The problem arises when using nav-pills and data-toggle, only the first set is reflecting as selected, while the other sets are not. W ...

jquerybootstrap-4

Can a child element be positioned above its parent's y-scrollbar using CSS?

I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over. Everything was working perfectly, until ...

htmlcss

Is there a way to prevent an HTML5 video from pausing or stopping when scrolling?

At the top of my page, there's a HTML5 video banner with the autoplay and loop attributes. However, when I start scrolling down, the video stops and doesn't resume when I scroll back up. I want the video to keep playing regardless of the user&apo ...

javascriptjquerycsshtmlvideo

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Apply a specific image layout once the drop event occurs

I have a container with 5 image pieces that need to be dropped into another container to complete the image. Once an image is dropped, I want to apply the style "position:absolute" so that it sticks to the previous image in that container. Although I have ...

javascriptjquerycss

Creating a specific order for Arabic strings in HTML is simple and can be done by utilizing

I need to adjust the ordering of a datetime written in Arabic numbers. I must use an Arabic string and currently have the following C# code written in Arabic: std.InnerText = "17-02-2016"; The current output is in Arabic numerals, displayed as ٢٠١٦- ...

c#htmlcssasp.net

What are the possibilities of utilizing both Bootstrap 5 grid and Bootstrap 4 grid interchangeably?

After working with Bootstrap 4 in my Angular 12 project for some time, I decided to upgrade to Bootstrap 5 today. While I know that some properties have changed, I thought the grid system remained unchanged. I often use "Mix and Match" columns as describe ...

cssangularbootstrap-4sassbootstrap-5

Styling Descendants Conditionally in Angular 2

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; } <div class="parent"> Parent <div>Child <div>GrandChild</div> </div> </div> Imagine a scenari ...

cssangularng-classng-style

Arrange a trio of cards in a row with dynamic alignment

I'm having trouble aligning the cards next to each other. I've written the code below but for some reason, they're not displaying next to each other. What I'm trying to do is call a REST API and get back a list of data. I want to loop ...

jqueryhtmlcssrestbootstrap-4

Updating style of element in EJS following POST request in Node.js using Express

I am working on a form page that is supposed to display a Success Alert (Boostrap) once the user fills out the form and clicks the Submit button. <form class="well form-horizontal" action="/contact" method="post" id="contact_form"> ... (input fiel ...

javascriptcssnode.jsexpressejs