Duplicated Duplicated - 4 years ago 220
CSS Question

Bootstrap Circle Modal

I am trying to create a bootstrap modal in a circular Form. Already created one but my problem is how can i insert the Text in the middle of the circle modal responsively?



<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>




Answer Source

Flex box will help you, and I have removed padding-top that was pushing content in bottom. for height I have used height:100vw and max-height:600px that will make box proper circle shape.

<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download