Lynob
Reputation: 5337
How to center a row in a modal?
I'm using bootstrap 3, I can't center items inside, I inserted my code here but it doesn't look like the website.
$('#modall').modal('show'); .fr-popup-btn-margin-left{
margin-left:1.7vw !important;
}
.fr-title-popup-margin{
margin-top:20px;
}
.fr-popup-btns{
text-align:center;
}
.fr-popup-title{
font-size:24px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
text-align: center;
}
.modal-fr-btn{
border-radius: 40px;
height: 25px;
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
padding: 0;
}
.dont{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size:10px;
}
.first-row-popup {
padding: 0 !important;
margin-top:0px;
margin-right:0px;
margin-left:0px;
margin-bottom:10px;
}
@media (min-width: 992px){
.pop2{
width:25vw;
}
.pop1{
width:30%;
}
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
<div class="modal fade" id="modall" role="dialog">
<div class="modal-dialog pop2 modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
</div>
</div>
<div class="modal-body">
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
</div>
</div>
</div>Notice how on the website, the flags aren't in the middle of the modal, they are slightly to the left. I don't want to add padding or margin.
In addition to what I tried above, I also tried text-center the row and text-align: center and margin: 0 auto. Nothing works, seems like something is adding padding to the left more than the right.
Upvotes: 1
Views: 326
Answers (1)
tao
Reputation: 90188
The easiest fix you can apply for this:
.flag-col > .row {
display: flex;
justify-content: center;
}
$('#modall').modal('show');.fr-popup-btn-margin-left{
margin-left:1.7vw !important;
}
.fr-title-popup-margin{
margin-top:20px;
}
.fr-popup-btns{
text-align:center;
}
.fr-popup-title{
font-size:24px;
font-family: 'Montserrat', sans-serif;
color: #008cc0;
font-weight: 800;
text-align: center;
}
.modal-fr-btn{
border-radius: 40px;
height: 25px;
width: 80px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 800;
padding: 0;
}
.dont{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size:10px;
}
.first-row-popup {
padding: 0 !important;
margin-top:0px;
margin-right:0px;
margin-left:0px;
margin-bottom:10px;
}
@media (min-width: 992px){
.pop2{
width:25vw;
}
.pop1{
width:30%;
}
}
.flag-col > .row {
display: flex;
justify-content: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
<div class="modal fade" id="modall" role="dialog">
<div class="modal-dialog pop2 modal-md">
<!-- Modal content-->
<div class="modal-content">
<button type="button" class="close close-fr-popup" data-dismiss="modal">×</button>
<div class="fr-popup-title">
<div class="modal-title">
</div>
</div>
<div class="modal-body">
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
<div class="row nopadding">
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
<div class="col-xs-3 text-center flag-col">
<div class="row nopadding">
<a class="close-fr-popup" href="">
<img class="img-circle flag" alt="English" src="https://i.imgur.com/ABwB1YD.png" height="54"
width="54">
</a>
</div>
<div class="row nopadding">
<a class="dont close-fr-popup col-xs-6" href="">English</a>
</div>
</div>
</div>
</div>
</div>
</div>Upvotes: 2
Related Questions
- How to center modal to the center of screen?
- How Can I Put Bootstrap Modal in Horizontally center?
- How to center an bootstrap modal
- Bootstrap 4 Modal Center Content
- How do I center this <a> tag on this modal in Bootstrap?
- Not able to get Bootstrap Modal to center with some JavaScript
- Manually vertically center a bootstrap modal
- Centering modal in twitter-bootstrap
- Bootstrap modal fit width and center horizontally
- How to center input in a Bootstrap 3 modal?