Customizing Label Sizes on Bootstrap 4 Custom-Selects

Having an issue with input element sizing. When creating an input-group (using bootstrap 4.5) and trying to make them input-group-sm, only the custom select fields are shrinking in size, while the labels in front of them remain normal size.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label class="input-group-text" for="newsAnzahl">Number</label>
    </div>
    <select class="custom-select" id="newsAnzahl" name="newsAnzahl">
      <option value="3" selected>3</option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
    </select>
    <div class="input-group-prepend">
      <label class="input-group-text" for="newsSortierung">Sorting</label>
    </div>
    <select class="custom-select" id="newsSortierung" name="newsSortierung">
      <option value="ASC">Ascending</option>
      <option value="DESC" selected>Descending</option>
    </select>
    <button id="button_getnewslist" type="button" class="btn btn-primary">Update List</button>
  </div>    
</form>

Examples sourced from here under "Sizing" and "Custom Select" headings. Thank you for any assistance!

Answer №1

If you're encountering an issue with multiple elements inside your .input-group element, a simple solution is to wrap each element in its own .input-group, like demonstrated in this example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label class="input-group-text" for="newsAnzahl">Anzahl</label>
    </div>
    <select class="custom-select" id="newsAnzahl" name="newsAnzahl">
      <option value="3" selected>3</option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
    </select>
  </div>
  <div class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <label class="input-group-text" for="newsSortierung">Sortierung</label>
    </div>
    <select class="custom-select" id="newsSortierung" name="newsSortierung">
      <option value="ASC">Ascending</option>
      <option value="DESC" selected>Descending</option>
    </select>
  </div>
  <button id="button_getnewslist" type="button" class="btn btn-primary">Update List</button>
</form>

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

To align everything in one line, consider using Bootstrap's grid system as illustrated in this demonstration:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form class="row mt-2">
  <div class="col">
    <div class="input-group input-group-sm mb-2">
      <div class="input-group-prepend">
        <label class="input-group-text" for="newsAnzahl">Anzahl</label>
      </div>
      <select class="custom-select" id="newsAnzahl" name="newsAnzahl">
        <option value="3" selected>3</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
      </select>
    </div>
  </div>
  
  <div class="col">
    <div class="input-group input-group-sm mb-2">
      <div class="input-group-prepend">
        <label class="input-group-text" for="newsSortierung">Sortierung</label>
      </div>
      <select class="custom-select" id="newsSortierung" name="newsSortierung">
        <option value="ASC">Ascending</option>
        <option value="DESC" selected>Descending</option>
      </select>
    </div>
  </div>
  
  <div class="col-3">
    <button id="button_getnewslist" type="button" class="btn btn-sm btn-primary">Update List</button>
  </div>
</form>

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

Best of luck!

Answer №2

Hopefully, that provided some assistance.

<!-- Utilizing CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- Including JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44342b343421366a2e3704756a757271873542"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85babeb8aa">[email protected]</a></a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="container">
  <form>
    <div class="input-group input-group-sm mb-2">
      <div class="input-group-prepend">
        <span class="input-group-text " for=" newsAnzahl ">Anzahl</span>
      </div>
      <select class=" custom-select " id=" newsAnzahl " name=" newsAnzahl ">
        <option value=" 3 " selected>3</option>
        <option value=" 10 ">10</option>
        <option value=" 20 ">20</option>
        <option value=" 50 ">50</option>
        <option value=" 100 ">100</option>
        <option value=" 200 ">200</option>
      </select>
    </div>
    <div class="input-group input-group-sm ">
      <div class=" input-group-prepend ">
        <span class=" input-group-text " for=" newsSortierung ">Sortierung</span>
      </div>
      <select class=" custom-select " id=" newsSortierung " name=" newsSortierung ">
        <option value=" ASC ">Ascending</option>
        <option value=" DESC " selected>Descending</option>
      </select>
    </div>
    <button id=" button_getnewslist " type=" button " class=" btn btn-primary mt-3 ">Update List</button>
  </form>
</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

Error occurred during the file watch process in PhpStorm after saving the CSSO file

Following the advice in the official PhpStorm documentation, I have implemented a CSS minifier. However, upon attempting to use it, I encountered the following error: cmd.exe /D /C call C:\Users\douglas\AppData\Roaming\npm\css ...

Ensure that the div and table header remain in a fixed position when scrolling

I have a container with a dropdown at the top and a table at the bottom. I am implementing ngx-infinite-scrolling feature, and I want the container and the table header to remain fixed when scrolling down as more data is loaded. You can view the jsfiddle ...

Utilizing the CSS properties of table-cell and float in a display

I've designed a header section, but I'm facing an issue. It looks good on devices with resolutions greater than 1020: https://i.sstatic.net/VlgmR.png https://i.sstatic.net/x3V15.png The problem arises on smaller resolutions: https://i.sstatic. ...

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

When my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

Version 5.1.3 of Bootstrap now combines the $colors with the $theme-colors map for enhanced customization

I am attempting to introduce some color variables like "blue", "indigo" ... to the $theme-colors map. It appears to be functioning, but after compiling, it seems duplicated in the :root selector as shown in the image below. Here's ...

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

I'm wondering why my second div is displaying a different size compared to the rest, even though they all share the same container-fluid class

Within the HTML snippet provided, utilizing Bootstrap, all three child divs possess the container-fluid class. However, why does the 2nd div differ from the others? Refer to this example Div Example. Div1 and div4 exhibit the same characteristics, as do d ...

Unattractive mobile modal

Hey there, This is how my .modal CSS code appears: .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #fff; border: 1px solid #999; border: 1px solid rgba ...

Conceal a specific DIV class when another class is visible

In my WordPress project, I am working on a customization where the add to cart button on the product page should remain hidden until the customer answers all the questions. The plugin I am using offers options for the customers to select, such as Step 1, S ...

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

What is the proper way to incorporate parentheses (either "(" or ")") on the JavaScript calculator's output screen?

This is the customized button I made for the parentheses. <div class="col"> <button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator"&qt;()</but ...

Refresh the browser to update the content of specific columns

$(".home").append($(".home .coco").sort(() => Math.random() - 0.5)); .row{margin-bottom: 30px;} <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.1. ...

What could be causing the overflow of my <table> data from its parent <div> container in Bootstrap?

Currently, I am trying to utilize angular in conjunction with bootstrap to present my data. I have mock data stored within a component and displayed in the html file of that component. However, I am facing an issue where when the table expands in size, it ...

Swapping mouse cursor using JavaScript

Currently, I am working on a painting application in JavaScript that utilizes the Canvas Object. I would like to customize the mouse cursor when it hovers over the Canvas object. Can anyone advise me on how to accomplish this? ...

Issue with "repeat-x" causing distortion in mobile image display

My repeating background image (.png) looks great on desktop with repeat-x, but on mobile, it has a slight repeat-y edge at the top: https://i.sstatic.net/yFfea.jpg The source image is 300px wide and 100px high, and the CSS for this div is: background: u ...

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...