Same width in divs with larger or shorter text inside - html

Question

I have trouble with box size, the trouble is that sometimes the text inside of a box is grower than other boxes. How can I have a fixed width in my boxes? is there a Bootstrap class that can do dat?
https://jsfiddle.net/tyxc4edf/
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12">
<div class="progress my-4">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="17" style="width: 70.588235294118%">
</div>
</div>
<div class="col-md-12 ">
<div class="card box-option-container justify-content-center ">
<h2 tabindex="0" role="heading" class="text-center">
<div class="question-title">
¿Estas abierto/a a viajar?
</div>
</h2>
<div class="row text-center no-gutters d-flex justify-content-center ">
<div class="option">
<label for="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo">
<div class="box-option py-5 align-middle ">
<input id="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo</span>
</div>
</label>
<label for="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad">
<div class="box-option py-5 align-middle ">
<input id="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad</span>
</div>
</label>
<label for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
<div class="box-option py-5 align-middle ">
<input id="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero</span>
</div>
</label>
</div>
</div>
</div>
<div class="nav-buttons right-button float-right m-2">
<a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a>
</div>
<div class="nav-buttons left-button float-left m-2">
<a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a>
</div>
</div>
</div>
</div>
</div>
EDIT: The width of the last box is smaller than the other boxes in larger screens. Try it growning the size of HTML section in jsfiddle

Answer 1

Add on your labels bootstrap class="col-12" like:
<label class="col-12" for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
Add col-12 on all labels.Now each label will get width 100% and all labels will have the same size!
Live example

Answer 2

In you class .option-text you should add font-size: [Wanted size]. Therefor, every boxes/options will have the same font size.

Answer 3

Add d-flex flex-column classes with option class
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
// Fonts
//#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
#import "~bootswatch/dist/materia/bootstrap.min.css";
#import '~toastr/toastr';
#import "~animate.css/animate.css";
// Font Awesome
//#import '~#fortawesome/fontawesome-free/scss/fontawesome';
//#import '~#fortawesome/fontawesome-free/scss/regular';
//#import '~#fortawesome/fontawesome-free/scss/solid';
//#import '~#fortawesome/fontawesome-free/scss/brands';
/** Ajustes generales **/
body {
background-color: #F9F9F9;
}
.nav-login {
box-shadow: none;
color: $white!important;
text-transform: capitalize;
padding-top: 0.3rem;
padding-right: 1rem;
padding-bottom: 0.3rem;
padding-left: 1rem;
}
.nav-login:hover {
background-color: #b61825;
}
.nav-login a {}
a {
color: $white;
}
a:hover {
color: $black;
text-decoration: none;
}
.btn-mred {
background-color: $mred;
}
.btn-mred:hover {
background-color: $btn-mred-hover;
}
.bg-color {
background-color: $bg-color;
}
/** Imagen Background **/
body,
html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("../imgs/imgparejas/couple-1030744.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg2 {
/* The image used */
background-image: url("../imgs/imgparejas/couple-1363967.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg3 {
background-image: url("../imgs/imgparejas/couple-1329349.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg4 {
background-image: url("../imgs/imgparejas/freestocks-org-t3mXTwuTWJ4-unsplash.jpg")!important;
/* Full height */
height: 100%!important;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.mred {
background-color: $mred;
}
.slogan {
font-size: 15px;
}
.logo {
font-size: 25px;
}
/** Card welcome ***/
.welcome-card {
background-color: $welcome-card;
}
/** cards **/
.card-material {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card-material:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.info-card>* {
font-size: 25px;
}
.circle {
display: inline-block;
text-align: center;
width: 70px;
height: 70px;
-moz-border-radius: 50%!important;
-webkit-border-radius: 50%!important;
border-radius: 50%;
-webkit-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75);
}
.circle>.icons {
position: relative;
top: calc(50% - 10px);
/* 50% - 3/4 of icon height */
}
.fav-btn {
background-color: $white;
}
.msg-btn {
background-color: $white;
}
.lov-icon {
font-size: 25px;
}
.msg-icon {
font-size: 25px;
}
.lov-icon-color {
color: $red;
}
.msg-icon-color {
color: green;
}
.fav-btn-selected {
background-color: $btn-mred-hover;
}
.msg-btn-selected {
background-color: green;
}
.lov-icon-color-selected {
color: $white;
}
.msg-icon-color-selected {
color: $white;
}
.profile-name-card {
border: none;
}
.option {
margin-left: 10px;
margin-right: 10px;
}
.box-option {
border: 2px solid gray;
}
.box-option-container {
border: none;
}
.back-color {
background-color: $body-bg;
}
.question {
background-color: $white;
text-align: center;
position: relative;
min-height: 450px;
padding-bottom: 50px;
}
.card-material {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.50s cubic-bezier(.25, .8, .25, 1);
}
.card-material:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.question-title {
width: 90%;
margin: 0 auto 50px;
font-size: 25px;
font-weight: 400;
}
.option input {
position: absolute;
opacity: 0;
}
.input {
cursor: pointer;
}
.option>input+div {
/* DIV STYLES */
cursor: pointer;
border: 2px solid transparent;
}
.option-text {
cursor: pointer;
}
.box-option:hover {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
.box-option-checked {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
/* Elemento Radio, cuando está marcado */
input[type="radio"]:checked~.box-option {
background: $btn-mred;
color: $white;
border: 2px solid $btn-mred;
}
.fixed-box {
//display: block;
//width: auto;
}
.col-container {
display: table;
width: 100%;
}
.fixed-box {
display: table-cell;
padding: 16px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center">
<div class="col-xs-12 col-md-12 col-lg-12 col-xl-12">
<div class="progress my-4">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="17" style="width: 70.588235294118%">
</div>
</div>
<div class="col-md-12 ">
<div class="card box-option-container justify-content-center ">
<h2 tabindex="0" role="heading" class="text-center">
<div class="question-title">
¿Estas abierto/a a viajar?
</div>
</h2>
<div class="row text-center no-gutters d-flex justify-content-center ">
<div class="option d-flex flex-column">
<label for="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo">
<div class="box-option py-5 align-middle ">
<input id="Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Otro: No puedes dejar tu tierra por razones personales mas estás dispuesto a tener una relación con alguien que sí pueda dejar su hogar e ir contigo</span>
</div>
</label>
<label for="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad">
<div class="box-option py-5 align-middle ">
<input id="No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">No interesado: Por nada del mundo dejarías a tu tierra y a los seres queridos con los creciste, por lo que necesitas a alguien que sea de tu misma comunidad</span>
</div>
</label>
<label for="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero">
<div class="box-option py-5 align-middle ">
<input id="Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero" type="radio" name="SEARCHED_GENDER" class="radio" value="hombre">
<span class="p-5 option-text">Interesado: Estás dispuesto a abandonar tu tierra natal y vivir mucho tiempo en el extranjero</span>
</div>
</label>
</div>
</div>
</div>
<div class="nav-buttons right-button float-right m-2">
<a class="btn btn-primary next" href="http://ilink.test/test/next" style="display: none;">Pregunta Siguiente</a>
</div>
<div class="nav-buttons left-button float-left m-2">
<a class="btn btn-warning back" href="http://ilink.test/test/back">Pregunta Anterior</a>
</div>
</div>
</div>
</div>
</div>