Enhance Your Profile with Bootstrap 4 Dropdowns

I am trying to incorporate a dropdown profile into my navbar, but it is not appearing where it should be located: pic1

<link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet"/>

   <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary nav-header">
      <a class="navbar-brand" href="#">TEST</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
            </li>

            <li class="nav-item dropdown active">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Courses
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                </ul>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="webinars">Webinars</a>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="#">Library</a>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="#">Instructions</a>
            </li>
        </ul>
        <ul class="proflie-dropdown navbar-nav">
            <li class="nav-item d-inline">
                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Username
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <img class="float-left" src="img/users/kolyan.jpg" alt="">
                    <p>Username</p>
                    <br>
                    <br>
                    <p class="float-left">Name</p>
                    <p>Surname</p>
                    <p>Status</p>
                  <div class="dropdown-divider"></div>
                  <div class="btn-group" role="group" aria-label="Basic example">
                    <a class="btn btn-secondary" href="#">Open Profile</a>
          <a class="btn btn-danger" href="#">Exit</a>
                  </div>
                </div>
               
            </li>
        </ul>
      </div>
    </nav>

The alignment of the dropdown menu with the button is crucial to ensure it stays within the page boundaries. See an example here.

P.S. As a Russian speaker, I apologize for any language errors. Please provide feedback in the comments if needed.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To incorporate the desired styling, simply assign the btn-group class to your profile-dropdown, and include dropdown-menu-right in your dropdown-menu. Here is an example:

<link href="https://bootswatch.com/4/materia/bootstrap.min.css" rel="stylesheet"/>

   <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary nav-header">
      <a class="navbar-brand" href="#">TEST</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
            </li>

            <li class="nav-item dropdown active">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Courses
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                </ul>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="webinars">Webinars</a>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="#">Library</a>
            </li>

            <li class="nav-item">
            <a class="nav-link" href="#">Instructions</a>
            </li>
        </ul>
        <ul class="proflie-dropdown btn-group navbar-nav">
            <li class="nav-item d-inline">
                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Username
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                    <img class="float-left" src="img/users/kolyan.jpg" alt="">
                    <p>Username</p>
                    <br>
                    <br>
                    <p class="float-left">Name</p>
                    <p>Surname</p>
                    <p>Status</p>
                  <div class="dropdown-divider"></div>
                  <div class="btn-group" role="group" aria-label="Basic example">
                    <a class="btn btn-secondary" href="#">Open Profile</a>
                    <a class="btn btn-danger" href="#">Exit</a>
                  </div>
                </div>
                <!-- <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-start" aria-labelledby="dropdownMenuLink" >

                </div> -->
            </li>
        </ul>
      </div>
    </nav>

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

Flyer: Move to Web Mercator coordinates (EPSG 3857) using panTo

I am currently using a standard leaflet map with a tile layer. In Leaflet, the only way to use the panTo method is by utilizing LatLng, for example, map.panTo(new L.LatLng(40.17, -98.12)); However, I am wondering how I can use the panTo method if my coor ...

javascriptmapsgisleaflet

Tips for employing clamp CSS to modify font size while maintaining alignment within a paper-inspired CSS grid

Currently, I am working on creating a responsive text section with a grid-like horizontal line resembling paper, and the challenge lies in aligning the text properly within this grid. While I can achieve this when the font size remains constant, I am curi ...

javascripthtmlcss

How can I retrieve a Jquery tooltip from a HiddenField?

I am trying to utilize a hidden field in my asp.net calendar to display a message using JQ Tooltip. However, when I attempt to use the value of the HiddenField for the tooltip, I encounter an error. $("#hf_taskID_cal").tooltip($("#hf_taskID_cal").val()); ...

javascriptjqueryasp.netjquery-ui

Having trouble activating a function through the context API using React hooks

I'm attempting to initiate a function via my CartContext API upon a click event, but it doesn't seem to be functioning correctly. I have verified that the method is operational, however, when I introduce the context function, nothing occurs. See ...

javascriptreactjsreact-hooks

What is the best way to transfer the content from a tinyMCE textarea editor to an inner controller using Symfony3 and Ajax

I have two small rich text editors identified as #homepage and #thankyoupage. My goal is to submit the content of these TinyMCE text areas to a Symfony controller. Below is my front-end implementation: https://i.stack.imgur.com/TE1Ys.jpg Currently, I am ...

javascriptjqueryajaxsymfonytinymce

Getting the nth-child rule for CSS in IE9 to function properly in IE8

This code is functioning in IE9: body.country-XYZ .abc:nth-child(3) { display:none; } As :nth-child() is effective in IE9 and newer versions, what can be done to ensure it also functions on IE8? Can you suggest an alternative method for achieving th ...

cssinternet-explorer-8

Error message in Jquery function: Uncaught TypeError - undefined property 'noDisagree'

Hey there! I am attempting to invoke a function in an AngularJs controller with a parameter using Jquery, but unfortunately encountering the error: Uncaught TypeError: Cannot read property 'noDisagree' of undefined function noDisagree(id){ ...

javascriptjqueryangularjs

Acquiring a fresh scope in Angular via a different component

In my project, I am developing an app using a component-based approach with Angular 1.5.5. As part of this development, I am utilizing d3js to create some elements with the class .floating-node. For each of these nodes, I am creating a new $scope and appe ...

javascriptangularjsangularjs-scopeecmascript-6components

CSS Problem: Background Color Not Showing Up in Table Rows

Check out my fiddle below: https://jsfiddle.net/teo7auv3/ I'm facing a challenge where I want to change the background color of the entire table row (TR) to red when there are validation errors. The problem seems to be related to this code snippet: ...

csscolorsbackgroundcss-tables

Error message: Authentication timestamp issue with cex.io web socket

Currently in the process of connecting to the CEX.IO bitcoin exchange's websocket. The websocket connection itself is fine, but encountering an error during the authentication phase: "Timestamp is not in 20sec range." Unsure about the cause of this is ...

javascriptnode.jswebsocket

Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words? I'm looking to align the second (and following) lines with the first one. Any suggestions? Html stands for <input><span>text</span> ...

htmlcss

Determine the number of input tags within a div element by utilizing the closest property in jQuery

Sorry for the silly question, but I've been struggling to find a solution. Spent hours scratching my head. Here is my HTML structure: <div class= 'container'> <div class="someclass"> <input>some content</in ...

javascriptjqueryhtml

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

jqueryhtmlcssanimation

Enhance Your Browsing Experience with Ajax Chrome Extension

I tried sending the URL to a PHP file in a Chrome extension, but I'm having trouble getting a response. manifest.json { "name": "Get pages source", "version": "1.0", "manifest_version": 2, "description": "Get pages source from a popup", "b ...

javascriptphpajaxgoogle-chrome-extension

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

javascriptjquerycsswordpress

Navigating up and down effortlessly using bootstrap

My webpage has a collapsible form located near the bottom, but when it's opened users must scroll down to see all of it. Is there a way to automatically scroll down when it's opened and then scroll back up when closed? Take a look at my code: & ...

javascriptjqueryhtmltwitter-bootstrap

AngularJS: The art of object pushing

I have a small application where I need to read data from a JSON file, display it, and allow users to add records to it. Specifically, I have an array called condition within the patient object, and I want to insert a new item into this array based on user ...

javascriptangularjsscopeangularjs-scopepush

The Issue with AngularJS ng-repeat Function Not Functioning

I am attempting to utilize angularJS to display div cards in rows of 3, but it's not working as expected. Instead of showing the cards in rows, it's displaying pure HTML where the object keywords in {{ }} are appearing as plain text. Below is all ...

javascriptangularjs

Is there a way to transmit a value from a page item on the client side to the server side in Oracle Apex without needing to submit the form?

I implemented a JavaScript function to capture the unique ROWIDs of selected rows in the GRID and send them to a specific page item. var gridView = apex.region("emp").call("getCurrentView"), selectedRecords = gridView.getSelectedRec ...

javascriptoracleplsqloracle-apex