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

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

Step-by-Step Guide for Uploading an Entire Folder and Its Contents

I have been working on a code to upload multiple files, but now I am facing the challenge of uploading an entire folder with multiple files and possibly subfolders containing even more files. Currently, I am utilizing JavaScript for obtaining the files and ...

javascriptphpajaxfile-uploadfetch

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Currently, I am involved in a project that involves UI development using Cx, a new FrontEnd framework based on React. You can find more information about Cx at One of the tasks in my project involves creating a Grid with filter fields located at the top ...

javascriptreactjsfrontendnumber-formattingcxjs

Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...

htmlcss

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

javascripthtmlmysqlcss

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

Below is a textbox that I am working on: <input type="text" name="company" id="company" required /> I am trying to figure out how to use jQuery to capture the values inside the textbox whenever they are typed or selected. Despite my efforts, I hav ...

javascriptphpjquery

Ember's distinctive feature: Named Block Helpers

Can we create "named blocks" in a different way? For instance, {{#customBlock "repeatableBlock"}} {{!-- block containing numerous properties and data that may become messy if hardcoded multiple times --}} {{/customBlock}} Then, elsewhere in the code, {{ ...

javascripthtmlember.jshandlebars.js

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

cssreactjstypescriptnext.jstailwind-css

Locate the initial ancestor element, excluding the parent element that comes before the root ancestor

My HTML structure is as follows: <div> <ul> <li> <div>Other elements</div> <div> <ul> <li class='base-parent parent'> <div>Base Parent ...

javascriptjquery

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

The ultimate guide to disabling iframe scrolling on Internet Explorer 8

After extensively searching for a solution, I realized that most answers focused on removing scrollbars rather than completely preventing the page from scrolling. My issue involves embedding an index.php file in an iframe on my website. Within the index.ph ...

htmliframescroll

"I am trying to figure out how to set a link to an image using JavaScript. Can someone help me

I need help figuring out how to insert an image or gif file within two inverted commas '' in this line of code: _("status").innerHTML = ''; (line number 13 in the actual code) Your assistance with this question would be greatly appreci ...

phpjavascriptauthenticationloading

Filtering multiple rows in a table using Javascript

I'm currently working on creating a filter that can filter based on multiple inputs, with each input filtering in a separate column. Here is the JavaScript & code I am using: function myFunction(column, input) { var filter, table, tr, td, i, t ...

javascriptjqueryhtml-tabledom-events

How to implement a cyclic item generation feature in React.js

My function is meant to draw multiple items in a cycle, but it is only drawing the first item when I attempt to draw 5. This is my function: export default function CinemaHole() { const items = []; for(let i = 0; i < 5; i++) { item ...

javascriptreactjs

Is there a way to apply textTransform to all components across the board?

I need to ensure that all text in my muiv5 project is capitalized by default, unless specifically overridden using sx or individual component styling. My attempted solution: <ThemeProvider theme={theme}> <IntlProvider locale="en& ...

cssreactjsmaterial-uinext.js

What is the best way to use ajax with jquery for file uploading?

Is it possible to use jQuery and ajax to upload an image with this code or something similar? jQuery.ajax({ type: "GET", url: "/userinfo/update/", dataType: "json", data: { ...

jqueryajaxfile-upload

Encountering a rollbackFailedOptional error during the NPM Install process

When attempting to use various command prompts like Windows Powershell, command prompt as an admin, and bash CMD, I encountered the same error message after trying to run npm install: npm install npm@latest -g The specific error message was: [...] / ro ...

javascriptnode.jsnpmfailed-installationnpx

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

phphtmlxmldomsimple-html-dom