3
respostas

[Dúvida] Como posicionar o texto de um radio no bootstrap

Estou em um projeto em que preciso posicionar o label "sim" e "não" para a posição abaixo do Radio, conforme imagem

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Meu projeto está assim autalmente:

<div class="col box__textos">
                            <label for="exampleFormControlInput1" class="form-label texto__formulario text-start fw-bold">O GABINETE ESTÁ CIENTE DE QUE, NO CASO DE EXISTÊNCIA DE TRILHAS SONORAS <font color="red">NÃO AUTORIZADAS</font>, O VÍDEO PODERÁ SER <font color="red">MUTADO</font>,PREJUDICANDO A APRESENTAÇÃO DO VEREADOR?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                <label class="form-check-label fw-bold" for="inlineRadio1">SIM</label>
                              </div>
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                <label class="form-check-label fw-bold" for="inlineRadio2">NÃO</label>
                              </div>
                        </div> 

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Olá Theodoro. Tudo bem?

Para colocar o texto da label abaixo do input radio ao invés de ao lado, você pode reorganizar a estrutura HTML. Adicionando um elemento entre o input radio e a label.

<div class="form-check">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <br> <!-- Adicionando uma quebra de linha -->
    <label class="form-check-label fw-bold" for="inlineRadio1">SIM</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <br> <!-- Adicionando uma quebra de linha -->
    <label class="form-check-label fw-bold" for="inlineRadio2">NÃO</label>
</div>

Você também pode alcançar o layout desejado usando CSS. Uma maneira simples é usar a propriedade display com o valor block para a label, para que ela apareça em uma linha separada. Aqui está um exemplo de como você pode fazer isso:

<style>
    .form-check-label {
        display: block;
        font-weight: bold;
    }
</style>

<div class="col box__textos">
                            <label for="exampleFormControlInput1" class="form-label texto__formulario text-start fw-bold">O GABINETE ESTÁ CIENTE DE QUE, NO CASO DE EXISTÊNCIA DE TRILHAS SONORAS <font color="red">NÃO AUTORIZADAS</font>, O VÍDEO PODERÁ SER <font color="red">MUTADO</font>,PREJUDICANDO A APRESENTAÇÃO DO VEREADOR?</label>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                <label class="form-check-label fw-bold" for="inlineRadio1">SIM</label>
                              </div>
                              <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                <label class="form-check-label fw-bold" for="inlineRadio2">NÃO</label>
                              </div>
                        </div> 

olá Elivelton, obrigado pela ajuda, ao colocar a tag ou display block quebrou a linha mas ficou desalinhado. Eu consigui de outra maneira:

<style>
    .radio-wrapper input[type="radio"] {
    appearance: none;

    border: 1px solid black;
    padding: .5rem;
    border-radius: 50%;
}

.radio-wrapper input[type="radio"]:checked {
    background-image: radial-gradient(white 35%, rgb(0, 132, 255) 40%);
    border: rgb(0, 132, 255);
}

.radio-wrapper > div {
    display: block;
    gap: .8rem;
    padding-left: .8rem;
}

</style>


<div class="col box__textos">
                        <label for="exampleFormControlInput1"
                            class="form-label texto__formulario-sm text-start fw-bold lh-1">O
                            GABINETE ESTÁ CIENTE DE QUE, NO CASO DE EXISTÊNCIA DE TRILHAS SONORAS <font color="red">
                            NÃO AUTORIZADAS</font>, O VÍDEO PODERÁ SER <font color="red">MUTADO</font>, PREJUDICANDO A
                            APRESENTAÇÃO DO VEREADOR?</label>

                        <div class="radio-wrapper">
                            <div>
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                                    value="true">
                                <label class="fw-bold" for="inlineRadio1">Sim</label>
                            </div>
                        </div>
                        <div class="radio-wrapper">
                            <div>
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                                    value="false">
                                <label class="fw-bold" for="inlineRadio2">Não</label>
                            </div>
                        </div>
                        
                    </div>

precisei retirar as classes originais do bootstrap e criar uma classe radio-wrapper e customizar na mão

Boa Theodoro. Parabéns!!

Fico feliz que tenha resolvido seu problema sozinho. Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!