Bootstrap: how to vertically align two buttons, at the start and the end of a title?
Question
I'm using bootstrap 3 modals, the design I've been asked to do is
Notice how the graphic designer placed a button vertically aligned with the start of the text and another vertically aligned with the end of the text.
My code is
<div class="fr-popup-title">
<div class="modal-title">
<div class="row fr-title-popup-margin">
<?php echo $question_title; ?>
</div>
<div class="row">
<?php echo $you_know; ?>
</div>
<div class="row">
<?php echo $migrant; ?>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-4 pl col-md-push-2">
<button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal">
<?php echo $yes; ?>
</button>
</div>
<div class="col-xs-4 btn-col pr col-md-push-3">
<button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal">
<?php echo $no; ?>
</button>
</div>
</div>
I get what I want but not the alignment I want, if I add some margins, it will break on another screen, what's the best way to solve it?
Please note that I tried inserting all my code as a snippet and it made more mess than the real deal, don't use the snippet as a reference, my code in a browser is way better, and don't worry about my classes, they seem like a lot but all of them are useless, they are nothing but a failed attempt at aligning.
The one without snippet is the same but easier to read.
$(window).on('load', function () { $('#francepopup').modal('show'); });
.fr-title-popup-margin { margin-top: 20px; } .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; } .dont { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 6px; } .fr-flags { margin: 0 auto; } .fr-text { margin: 0 auto 0 3px } @media (min-width: 992px) { .modal-dialog { width: 30%; } } @media (max-width: 991px) { .pr { float: right; } .pl { float: left; } } <script src="https://cdnjs.cloudflare.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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <body> <div class="modal fade" id="francepopup" role="dialog"> <div class="modal-dialog 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 class="row fr-title-popup-margin"> Are you or is someone </div> <div class="row"> you know </div> <div class="row"> a migrant in France? </div> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-4 pl col-md-push-2"> <button type="button" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal"> Yes </button> </div> <div class="col-xs-4 btn-col pr col-md-push-3"> <button type="button" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal"> No </button> </div> </div> </div> </div> </div> </div> </body>
1 answers
solution1
1 ACCPTED 2019-03-02 02:10:49
i simply edited your code and i hope it is what you really needed :)
$(window).on('load', function () { $('#francepopup').modal('show'); });
.fr-title-popup-margin { margin-top: 20px; } .fr-popup-title { font-size: 23px; font-family: 'Montserrat', sans-serif; color: #008cc0; font-weight: 800; /*text-align: center;*/ } .modal-fr-btn { border-radius: 40px !important; /*height: 25px;*/ width: 80px; font-size: 14px; font-family: 'Montserrat', sans-serif; color: white; font-weight: 800; } .dont { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 6px; } .fr-flags { margin: 0 auto; } .fr-text { margin: 0 auto 0 3px } @media (min-width: 992px) { .modal-dialog { width: 30%; } } @media (max-width: 991px) { .pr { float: right; } .pl { float: left; } } <script src="https://cdnjs.cloudflare.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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <body> <div class="modal fade" id="francepopup" role="dialog"> <div class="modal-dialog 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 style="display:flex"> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> <div style="max-width:49.33333333%; text-align:center"> Are you or is someone <br/> you know <br/> a migrant in france? </div> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> </div> </div> </div> <div class="modal-body"> <div style="display:flex"> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> <div style="max-width:49.33333333%; flex: 0 0 49.33333333%"> <button type="button" style="float:left; width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn yes-fr-popup" data-dismiss="modal"> Yes </button> <button type="button" style="float:right;width:115px; height:40px; font-size:18px" class="btn btn-warning modal-fr-btn close-fr-popup" data-dismiss="modal"> No </button> </div> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> </div> <br/> <div style="display:flex"> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> <div style="max-width:49.33333333%; flex: 0 0 49.33333333%; text-align:right; margin-top:-15px"> (Please dont ask <br/> me this again) </div> <div style="max-width:25.33333333%; flex: 0 0 25.33333333%;"></div> </div> </div> </div> </div> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to vertically align bootstrap buttons with text in a row?
Align two buttons vertically
How to vertically align and evenly distribute two buttons?
How to align buttons vertically
How to vertically align buttons in form-row class in bootstrap 4
How to align input buttons vertically. Bootstrap3
How to vertically align in Bootstrap 4?
How to align an item at the end of a card, vertically centred (Using bootstrap 4)?
Two buttons vertically misaligning, how to align them properly?
How can I vertically align an icon with two buttons?
Related Tags