Round Modal Design using Bootstrap

I have successfully created a circular form bootstrap modal, but I am struggling with how to insert text in the center of the circle responsively. Can anyone help?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
  .modal-content {
    background-color: #0099FF;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
  }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

htmlcssmodal-dialog

Answer №1

Utilizing Flexbox is the key solution here. By removing the padding-top that was causing content to be pushed down, and setting the height using height:100vw along with max-height:600px, a proper circular shape for the box can be achieved.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>
  .modal-content {
    background-color: #0099FF;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 600px;
  }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      Content
    </div>
  </div>
</div>

Answer №2

To add a div to the model-content and set it to have position:absolute, center it on the page.

<style>
   .modal-content {
      background-color: #0099FF;
      position: relative;
      border-radius: 50%;
      width: 100%;
      height: auto;
      padding-top: 100%;
   }
   #text {
     position: absolute;
     top:50%;
     left:45%;
   }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="text">Lorem ipsum</div>
      </div>
   </div>
</div>

You can view an example here : http://www.bootply.com/kBT3elyYFV

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

Creating HTML content from a function return in Angular

I'm trying to figure out the process through which TypeScript and HTML exchange data. (TypeScript) public getContactByTradingPartnerId(tradingPartnerId: number):string { const map = { 1001 : "<a href="/cdn-cgi/l/email-protection ...

javascripthtmlangulartypescript

Developing an Easy-to-Use PDF Popup Interface

I need a simple PDF modal where I can input the text: 'The sky is blue' and have it link to a PDF that opens up when clicked. I found a similar sample online, but it includes an image plus an image modal that pops up. I want to replace the imag ...

javascripthtmlcsssimplemodal

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

Tips for removing CSS and Javascript code from a website's source code

After implementing the Slicknav Menu plugin on my website, I noticed that a portion of the plugin's CSS and script code is visible when inspecting the source code of the main page: <head> ... <style id='slicknavcss-inline-css&apo ...

javascriptcsswordpresshead

Using icons from Bootstrap on your local machine can be a valuable asset for

When using this particular method <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> The icon is visible with this reference: <button type="reset" class="btn btn-warning cancel"> <i ...

htmlcss

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. https://i.ss ...

javascripthtmlangularjsangulard3.js

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...

phphtmlcsslayout

Achieve centered alignment for a website with floated elements while displaying the complete container background color

I am currently working on a website that consists of the basic elements like Container, Header, Content, and Footer. The container has a background-color that should cover the entire content of the site, including the header, content, and footer. However, ...

htmlcsscss-float

Populate a secondary dropdown menu using the selection from a primary dropdown menu and retrieve the corresponding "value" instead of displaying the value as a dropdown option

I am attempting to create two dropdowns that are populated by another dropdown. Below is the code: HTML: <form type=get action="action.php"> <select name="meal" id="meal" onChange="changecat(this.value);"> <option value="" disabled select ...

javascriptarraysjsonhtml

How can you assign a value to an HTML Input by dragging an SVG shape or canvas?

I am currently in the process of creating a user interface for setting pricing parameters. There are three categories that need to be visually represented, along with two sliders to determine suggested Buy/Sell prices. To demonstrate my progress so far, I ...

javascripthtmlsvg

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

javascriptcssnode.jsexpressnodemon

.htaccess 404 not redirecting properly

I need help with the following code snippet: # Keep this line intact for mod_rewrite rules to function properly RewriteBase / ErrorDocument 404 /errors/404.php Despite having the file 404.php in the errors folder, it doesn't seem to be working as ...

html.htaccess

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting

How can Selenium click on an <a> element using By.LinkText and bypass any line breaks within the link text?

One a element contains text with \r\n within it. The HTML code is shown below: <a href="/Profile/ProfileView?isSuccessScreen=1&amp;URLID=x/ayvqzf7zojzzqiauihka" class="list green profile "> <img src="/content/css/theme/images/pro ...

c#htmlselenium-webdriver

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

javascriptcsshtml

Overflowing is the width of Bootstrap's Grid Row

I managed to create this layout using only Bootstrap 5, without any CSS customization. Below is the HTML code I used: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=&quo ...

cssbootstrap-5

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...

javascriptcssvue.jsvuex

Updating and Preserving Content in Angular

I've encountered an issue while working on a code that allows users to edit and save a paragraph on the screen. Currently, the editing functionality is working fine and the save() operation is successful. However, after saving, the edited paragraph do ...

javascripthtmlangulartypescript

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular