How to position a Bootstrap 4 Modal on the right side

I am currently utilizing Bootstrap 4 and looking to align the modal to the right (refer to the image for clarification):

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

Here is the code I have implemented so far, which was sourced from the Bootstrap documentation:

<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#exampleModalScrollable" id="btn1">mehr Erfahren</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable justify-content-end" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalScrollableTitle">Winkelstufe</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>         
        </div>
      </div>
    </div>
  </div>

Your assistance on achieving this would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

After extensive searching, I couldn't find a suitable solution, so I decided to create one from scratch. Surprisingly, it was easier than I anticipated:

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<style>
.modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    right: 0px;
}
.modal-content {
    height: 100%;
}
</style>
<div class="container demo">
  <div class="text-center">
    <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2"> Right Sidebar Modal </button>
  </div>
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Right Sidebar </div>
        <div class="modal-body">
          <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>

Answer №2

Revise your HTML:

  <!-- Updated Modal -->
        <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
                    </div>

                    <div class="modal-body">
                        <p>Content goes here</p>
                    </div>

                </div><!-- end modal-content -->
            </div><!-- end modal-dialog -->
        </div><!-- end modal -->

Example: https://codepen.io/bootpen/pen/jbbaRa

Answer №3

Are you looking to utilize Bootstrap 4 for your grid design?

    <div class="container">
      <div class="row">
   // <!--this is for the image section-->
        <div class="col-md-7">

        </div>

    <!--this is for the right section-->
        <div class="col-md-4">

    // Place your code here //


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

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 play() function is malfunctioning in Internet Explorer 11

I am having an issue with using the onclick function to call and play a file. The file plays fine in Chrome and Firefox, but not in ie11. Below is the code snippet: function play1(){ var audio1 = document.getElementById("audio1"); audio ...

javascripthtmlaudiohtml5-audio

Ways to troubleshoot the vanishing of a bootstrap template from my Laravel project

After downloading a laravel project from a shared hosting, I attempted to edit it on my localhost. However, I encountered two errors when trying to access the home address localhost:8000/: Warning: require_once(C:\Users\Rafaa\Downloads\ ...

laravelbootstrap-4

Why isn't my CSS code responding to the media query properly?

Currently, I am utilizing media queries to adjust the appearance of my website based on different screen sizes... Below is an excerpt of my HTML code: <meta name="viewport" content="width=device-width, initial-scale=1"> <l ...

htmlcssgridmedia-queries

The slider components have an endless loop feature that only runs once before coming to a

I'm working on creating an infinite slider that loops continuously without the need for navigation buttons. Instead, I plan to allow users to control the slider using touch gestures (although this functionality is not yet implemented in the code snipp ...

javascripthtmlcsssass

What is the best way to assign a default value in a select dropdown menu without it being a

I have a dropdown with a list of users on my web page: <select class="form-control" name="user"> <#list sbUsers as sbUser> <option value="${sbUser.login}">${sbUser.login}</option> </#list> </select> How ...

htmlfreemarker

How can I retrieve all the text from an HTML document following a particular tag?

I'm struggling with extracting text from an HTML file after the second occurrence of a specific tag. I've attempted using regex and bs4, but without success so far. The regex only captures the hit itself and not the rest of the html file. As for ...

pythonhtmlbeautifulsoup

Leveraging AJAX for managing multiple selection options without the need for a submit button

Currently, I have a page featuring two select buttons. Whenever both are selected, the page should update automatically. Furthermore, each time a new option is chosen, the page needs to keep updating on its own. Below is my HTML code: <form action="" m ...

javascriptphpjqueryhtmlajax

What seems to be the issue with my snake game not loading properly?

I am having trouble getting something to display in my browser while working on this snake game. No matter how many times I check, I can't seem to find the mistake I made. Every time I refresh the browser, the screen remains blank. gameTime.html < ...

javascripthtml

Struggling to locate text within the confines of the meta viewport

So I'm new to this whole blogging thing and I wanted to make sure my site was responsive. I added the meta viewport tag, but when I tested it out on Google Chrome with different window sizes, my text just disappeared! Here's a snippet of the CSS ...

htmlcsswebfrontendresponsive

how to style a page with a CSS arrow shape

Can someone help me figure out how to create an arrow similar to the one in this button using CSS? https://i.sstatic.net/gQi0l.png I've been able to create triangle-like arrows like the one below #triangle_arrow { top: 3pt; content: ...

csscss-shapes

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

htmlcssdrop-down-menunegative-number

Some examples of CSS styling that makes the parent element shorter than the child element

Currently, I am engaged in a project aimed at enhancing my understanding of Spring MVC practices. As part of this endeavor, I have embarked on the development of a simplified version of Twitter. Essentially, users can log in, share brief updates, and view ...

htmlcssstyles

What could be causing the misalignment of the Datepicker calendar in Material UI?

I have integrated a datepicker using the library "@mui/x-date-pickers/DatePicker". import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; import { Locali ...

javascriptcssreactjsmaterial-uidatepicker

Using JavaScript to trigger an open dropdown menu in Bootstrap 4

I have a dropdown menu that is designed like this: <div id="actions" class="dropdown btn-group btn btn-outline-secondary" role="group"> <div id="actionToggle" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fa ...

jquerybootstrap-4

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

javascriptcssfrontendbootstrap-5react-fullstack

Ways to retrieve the text value of the first column using a button click event in JavaScript

As a beginner in HTML and JavaScript, I have a clear code provided below: HTML <tr> <td>1</td> <td>Info1</td> <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td> & ...

javascripthtml

What is the best way to implement automatic color changing in PHP code?

I have a MySQL table called 'contact number' that contains the field 'c_n'. I need to display data from this field and change the color based on the length of the value. If the field's value is less or more than 11 digits, the colo ...

phphtmlcss

Updating the src attribute of an image using document.getElementByClassName along with the ngif directive

I am attempting to dynamically modify different icon images on page load using document.getElementsByClassName. The icons are used multiple times and their visibility is controlled by the ngIf directive based on user actions. <img class="viewlist_b ...

javascripthtmlangularjs

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

javascriptcssreactjsdatagridmaterial-ui

Tips for maintaining a single-line div while adding ellipses:

What is the CSS way to ensure that a div or class contains only one line of text, with ellipses added if it exceeds that limit? I am aware that setting a specific height and using overflow:hidden can achieve this, but it doesn't quite work for my need ...

javascriptcsshtmllayout