Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

I am struggling with Bootstrap 4.1 as I try to align content to the right side. Specifically, I have a Navigation Bar that triggers a Modal Dialog containing Tabs. The dropdown menu on the far right of the Tab is what I want to justify to the right. Here are the methods I've attempted:

  1. Added ml-auto to the 
    <li class='nav-item active dropdown'>
    tag in the section labeled "Modal - Drop Down"
  2. Added mr-auto to the 
    <ul class="nav nav-tabs mr-auto" role="tablist">
    tag in the section labeled "Modal - Drop Down"
  3. Added justify-content-end to the 
    <li class="nav-item active dropdown justify-content-end">
    tag in the section labeled "Modal - Drop Down"
  4. Added ml-auto to the 
    <li class="nav-item active dropdown justify-content-end ml-auto">
    tag in the section labeled "Modal - Drop Down"
  5. Attempted various Flex classes such as: 
    <div class="d-flex flex-row-reverse bd-highlight">, <div class="d-flex justify-content-end">, <div class="d-flex align-items-end">, <div class="align-self-end">

Unfortunately, none of these solutions seem to be effective.

Has anyone successfully executed this alignment using Bootstrap 4.1?

You can access my code on JSFiddle: https://jsfiddle.net/tsmolskow/jm19hu3t/66/

Below is the HTML code:

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header"></div>
   </div>
</div>

<!-- Navigation Bar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">SharePointGypsy.com</a>
        <button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="navbar-toggler-icon"></span> 
        </button>
      <div class="navbar-collapse collapse" id="navbar">
         <ul class="nav navbar-nav navbar-right">
            <li class="nav-item active"> 
               <a class="nav-link" id="Departments" data-toggle="modal" data-target="#MyNNSModal">Departments</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="Resources" data-toggle="modal" data-target="#MyNNSModal">Resources</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="Procedures" data-toggle="modal" data-target="#MyNNSModal">Procedures</a></li>
            <li class="nav-item active"> 
               <a class="nav-link" id="News" data-toggle="modal" data-target="#MyNNSModal">News</a></li>
         </ul>
      </div>
    </nav>

    <!-- Modal -->

      <div tabindex="-1" class="modal fade" id="MyNNSModal" role="dialog" aria-hidden="true" aria-labelledby="exampleModalLabel">
         <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
               <div class="modal-header">
                  <div class="tabbable">

                     <!-- Nav Tabs, Modal Nav Bar -->

                           <ul class="nav nav-tabs" role="tablist">
                              <li class="nav-item active">
                                 <a class="nav-link active" href="#aDepartments" data-toggle="tab">Departments</a></li>
                              <li class="nav-item active">
                                 <a class="nav-link" href="#aResources" data-toggle="tab">Resources</a></li>
                              <li class="nav-item active">
                                 <a class="nav-link" href="#aProcedures" data-toggle="tab">Procedures</a></li>
                              <li class="nav-item active">
                                 <a class="nav-link" href="#aNews" data-toggle="tab">News</a></li>                            

                          </ul> 

                  </div>
                    <div class="d-flex align-self-end">
                            
                            <a class="dropdown-toggle" data-toggle="dropdown" id="navbardrop">
                                <img src="Images/KoKoPelli.jpg" class="profile-picture"/>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Newsfeed</a></li>
                                <li><a class="dropdown-item" href="#">One Drive</a></li>
                                <li><a class="dropdown-item" href="#">Sites</a></li> 
                            </ul>

                   </div>

                  <!-- Close Button -->

                     <div>
                        <button class="close" aria-label="Close" type="button" data-dismiss="modal"><span aria-hidden="true"><img class="close-button" src="/sites/dscott/tmfds/SiteAssets/Images/CloseButton.png" alt=""/> </span> </button> </div> </div>

               <!-- Panes -->

                  <div class="modal-body">
                     <div class="tab-content">

                        <!-- Tab Panes -->

                           <div class="tab-pane active" id="aDepartments">
                              <p> 
                                 <b>Departments:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aResources">
                              <p> 
                                 <b>Resources:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aProcedures">
                              <p> 
                                 <b>Procedures:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div>
                           <div class="tab-pane" id="aNews">
                              <p> 
                                 <b>News:</b> 
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
                           </div> 
                     </div>
                  </div>

                  <!-- Footer -->

              <div class="modal-footer">​​​​</div>

            </div>
         </div>
      </div>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Could you give this a shot? Here's the CSS code:

.tabbable {
    width: 100%;
}

.tabbable > ul.nav.nav-tabs {
    display: table;
}

.tabbable > ul.nav.nav-tabs > li {
    width: auto;
    display: table-cell;
}

.tabbable > ul.nav.nav-tabs > li:last-child {
    width: 100%;
    vertical-align: bottom;
}

.tabbable > ul.nav.nav-tabs > li:last-child ul.dropdown-menu {
  width: 100%;
}

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

Repeat the execution or refresh an EventListener

I am a beginner in the world of coding, currently working on my inaugural project to create a web-based game using HTML, CSS, and JavaScript. I have encountered an issue with the .addEventListener() method that I couldn't seem to find a solution for ( ...

javascripthtmldom

use checkboxes to filter products in a Laravel application

I am currently developing a website with the Laravel framework, and I would like to implement checkboxes for filtering products by category. However, I am facing an issue where I can only display the selected category name in an alert message instead of fi ...

jqueryajaxlaravel

What is the best way to use AJAX to send a downloadable file in WordPress?

Currently working on developing a WordPress plugin and could use some assistance ...

javascriptphpjqueryajaxwordpress

Steps to properly insert an SVG into a button

I have a block set up with a Link and added text along with an svg image inside. How can I properly position it to the lower right corner of the button? (see photo) Additionally, is there a way to change the background color of the svg? This is within th ...

htmlreactjsnext.jssass

There appears to be an issue with Javascript's ability to handle JSON API requests

I'm currently working on a webpage that utilizes the openweathermap API to showcase the user's city and local temperature. Unfortunately, I'm encountering an issue where the JSON API is not being processed and nothing is happening. Despite r ...

javascriptjqueryjsonopenweathermap

I seem to be invisible to the toggle switch

I currently have a toggle button that controls the activation or deactivation of a tooltip within a table. Right now, the tooltip is activated by default when the application starts, but I want to change this so that it is deactivated upon startup and on ...

htmlangulartypescriptnebular

Displaying text underneath an image

Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3. Here's what I have so far: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" ...

htmltwitter-bootstrapcss

Requesting data from server using Ajax with multiple JSON responses

I'm facing a situation where my Ajax script calls a PHP file to make a query to MySQL and then formats the response in JSON. The challenge is that I need to retrieve data from different tables based on the id sent with the Ajax call. Some tables retur ...

phpjquerymysqlajaxjson

The JQuery CSS function is unable to alter the height of the element

I am working with a grid that contains various elements, each with the class item. When I click on one of these elements, I toggle the class expand to resize the element. <body> <div class="grid"> <a href="#"> < ...

javascriptjqueryhtmlcssheight

Is it possible to trigger the JavaScript mouseover function following a click event?

Is it possible to call a function on mouse over after the first click event is triggered by the user? <a href="javascript:void(0);" id="digit<?php echo $k;?>" onClick="javascript:return swapClass('<?php echo strtoupper($v);?>',&ap ...

javascriptjqueryajax

What is the easiest way to clear browser cache automatically?

Hello, I have implemented an ajax auto complete function in one of my forms. However, I am facing an issue where over time, the suggestions get stored and the browser's suggestion list appears instead of the ajax auto complete list, making it difficul ...

phpjavascriptajax

Combine large arrays

Hey, I'm encountering some issues while trying to merge large arrays in a React Native app. Specifically, I am attempting to implement infinite scroll on React Native. The issue arises when the array reaches 500+ items; every time I add more items, my ...

javascriptarraysreactjsreact-nativeoptimization

Saving Bootstrap Data - Modals, Tags and Notifications

Check out my code snippets on this example/demo page. /* Messages Modal */ $(document).ready(function(){ var informer = $("#messageInformer a"); var refreshBadge = function(messageCount) { var badge = informer.find(".badge"); ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using AngularJS to differentiate between desktop and mobile devices, as well as determine if the connection is wifi or not

After some research on SO, I couldn't find similar Q&A about detecting connection types rather than just if a connection exists or not. The goal of my website is to automatically play a video clip based on the user's device and network statu ...

javascripthtmlangularjs

Div blur event for editing content

Utilizing a content editable div as an input control has presented some challenges for me. Unlike a textarea or input element, the div does not send information to the server automatically. To work around this issue, I have implemented a solution where I u ...

javascriptc#htmlasp.net

Displaying or concealing an HTML element based on a JavaScript XHR request function

I have a single HTML element that I need to display and hide using jQuery within a pure JavaScript XHR request method. Currently, the element always remains visible without hiding when the request is complete or successful. On error, I would like it to be ...

javascriptjqueryxmlhttprequestloading

How to align text to the left and image to the right using CSS

I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images. My goal is to have the text left-aligned and vertically centered, while the images are right ...

csshtmllayout

Is there a way to prevent Express from automatically adding a slash to a route?

Despite my extensive search for a solution, none of them have proven effective. Perhaps you could provide some assistance. I'm currently working on a Node.JS and Express-based plugin webserver. The main code for the webserver is as follows: This sec ...

javascriptnode.jsexpresshttp-redirectroutes

When running scripts, Protractor is unable to perform a click action in Safari, even though it works perfectly in

Currently, I am in the process of developing an angular application and utilizing directconnect for Chrome and Firefox. All my test scripts are functioning as expected, however, a new requirement has been introduced to run these same tests on Safari. To ...

javascriptangularselenium-webdriversafariprotractor

Sending an object over to a different page

Need some assistance with displaying JSON data that is being repeated using ng-repeat. { "title": "image title", "description": "Lorem ipsum dolor sit amet, per ea ferri platonem voluptaria, ea eum ubique ornatus interpretaris. Dolore erroribus reprimique ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat