Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height?

https://i.sstatic.net/0mPsy.png

https://i.sstatic.net/GLbvE.png

 <!-- query 7 -->
                  <div class="row mb-4">
                    <div class="btn-group justify-content-center" role="group" aria-label="Basic radio toggle button group">
                      <div class="row"><p><strong style="display: inline">Q7</strong> {{ post.question7 }}</p></div></div>
                      <div class="row justify-content-center mx-auto">
                        {% if post.url7 %}
                    <div class="row"><img class="maths" src="static/test/{{ post.url7 }}"></div>
                    {% endif %}
                    <fieldset id="group7">
                      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto"><input type="radio" class="btn-check" id="q7a" name="options7" value="ae" autocomplete="off" required>
                        <label class="btn btn btn-outline-primary quiz" for="q7a"><strong style="display: inline">A:</strong> {{ post.ae }}</label></div>
                      <div class="form-check-inline spelling_button p-0 mb-1 mx-auto"><input type="radio" class="btn-check" id="q7b" name="options7" value="af" autocomplete="off">
                        <label class="btn btn btn-outline-primary quiz" for="q7b"><strong style="display: inline">B:</strong> {{ post.af }}</label></div>
                        <div class="form-check-inline spelling_button p-0 mb-1 mx-auto"><input type="radio" class="btn-check" id="q7c" name="options7" value="ag" autocomplete="off">
                          <label class="btn btn btn-outline-primary quiz" for="q7c"><strong style="display: inline">C:</strong> {{ post.ag }}</label></div>
                          <div class="form-check-inline spelling_button p-0 mb-1 mx-auto"><input type="radio" class="btn-check" id="q7d" name="options7" value="ah" autocomplete="off">
                            <label class="btn btn btn-outline-primary quiz" for="q7d"><strong style="display: inline">D:</strong> {{ post.ah }}</label></div>
                            <div class="form-check-inline spelling_button p-0 mb-1 mx-auto"><input type="radio" class="btn-check" id="q7e" name="options7" value="ai" autocomplete="off">
                              <label class="btn btn btn-outline-primary quiz" for="q7e"><strong style="display: inline">E:</strong> {{ post.ai }}</label></div>
                            </fieldset>
                            </div>
                          </div>

Answer №1

To ensure the buttons are all the same size, consider adding a min-height property. This can be achieved by assigning a class or applying inline styles:

<div class="form-check-inline spelling_button p-0 mb-1 mx-auto" style="min-height: 60px;">
  <input type="radio" class="btn-check" id="q7a" name="options7" value="ae" autocomplete="off" required >
  <label class="btn btn btn-outline-primary quiz" for="q7a">
    <strong style="display: inline">A:</strong> 
    {{ post.ae }}
  </label>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting the initial position for an SVG path

Working on a unique loading animation with 3 shapes that will scale as they follow a path. Each shape begins from a different starting point but follows a similar path. Shapes and paths were created in Illustrator and exported as SVGs. See below for an exa ...

jquery toggleClass not retaining previous click event

I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it d ...

Setting the $rootScope in AngularJS using input radio and ngModel

Why is my $rootScope value not getting set with ngModel on my radio button? Here's an example jsFiddle that demonstrates the issue. <form name="pageTwoForm"> <h3>General Information > Knowledge About </h3> & ...

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

Vertical spacing in Bootstrap for mobile devices

My bootstrap breadcrumb element is displaying fine on large monitors, but on mobile devices the page header covers it. How can I make the header move to a new row for smaller screens? <div class="card"> <div class="card-body ...

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

Is conditional CSS possible with NextJS?

While working on an animated dropdown for a navbar, I came across this interesting dilemma. In a strict React setup, you can use an inline if/else statement with onClick toggle to manage CSS animation styles. To ensure default styling (no animation) when ...

floating downward inside the container

Check out my website at . Everything looks great in Firefox, but when I view it in IE, the "top" button that should be floated inside the h2 titled "Unit 301: Pre-production skills" is floating to the right and getting pushed outside of the heading. Any i ...

Maintain the div height as the image loads

Is there a way to prevent the collapse of the .img-container while an image is loading? Currently, when the image takes a few seconds to load, the container collapses and only expands to full height once the image has loaded. I would like the container to ...

CSS Transition - Troubleshooting my malfunctioning code

I seem to be facing a simple issue with my code. The following snippet does not work in Chrome or Firefox, as the transition property is not working properly. Instead of smoothly transitioning from blue to red when hovered over, the element immediately swi ...

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging. The select element in qu ...

The embed video is camouflaged within the bootstrap mobile display

I am currently using the latest version of bootstrap and bootswatch united theme to build and explore a standard website. The website is live at this link live site, featuring an embedded section on the right side as shown. My choice for the view engine is ...

Let's experiment with creating a horizontal bootstrap form featuring three columns

I am struggling to create a horizontal form with three fields due to the space issue between the label and input type elements. My goal is to minimize the space between the label and input. Here is the HTML code snippet: <div class="container-flu ...

Tips for displaying CSS background color on top of an inline style background image

I am facing a dilemma while using Laravel - if I put a background image into my CSS style sheet, I lose my variable. Currently, this is how I have it set up: <div class="gradient"><div class="topback" style="background-image: url('/storage/c ...

Positioning divs around a circle can be quite challenging

Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration. http://jsfiddle.net/rkqBD/ In the provided ex ...

"Customize your WordPress theme by moving the sidebar from left to right for

Currently, I am utilizing the flat theme sourced from . In an attempt to customize the appearance, I made modifications within style.css: #page:before, .sidebar-offcanvas, #secondary {float: right !important;} However, this adjustment only applies to a ...

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

I've been facing some challenges while trying to style my material-ui select component using styled-components instead of material- classes. The version I am working with is material-ui/core 4.12.3. When I use the old makeStyles component from materi ...

Enigmatic void found beneath image surfacing

Similar Question: Dealing with Additional Space at the Bottom of an Anchor Tag Take a look at this example page here.. There seems to be a mysterious gap below the picture of the family, just before the gray-bordered (5px #333) div that holds the ima ...

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...