Editing the dimensions of the input in Bootstrap 4

Is there a way to adjust the width of the input and select elements? I want the input element to take up more space while the select element occupies less space.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control">
</div>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Consider incorporating the col-* classes into the select and input elements:

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
      <div class="input-group mb-3 row">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">Button</button>
        </div>
        <select class="custom-select col-4" id="inputGroupSelect03">
          <option selected>Choose...</option>
          <option value="1">One</option>
        </select>
        <input class="col-8 form-control">
      </div>

Answer №2

To properly style your select element, make sure to add the col-* class.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select col-3" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control col">
</div>

.input-group already has the .row style applied, so there is no need to give the .row class again. Giving the .row class will result in unnecessary negative margins.

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

How can we use PHP and jQuery to open a simple modal with data?

Here is a basic modal setup: <div id="info" style="display: none;"> <h3 class="title">User Information</h3> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td width="50%" align="right ...

javascriptphpjquerymodal-dialog

Is there a way to create a dropdown menu that appears to emerge from behind a button?

I am struggling with the stack order of my dropdown menu. Despite using z-index, it appears in front of the button instead of behind it. I want it to look like it is coming out from behind the button. Here is my code: .subnav-wrapper { position: relat ...

htmlcss

Coding in PHP, JavaScript, and HTML allows builders

I am facing some difficulties in locating my specific question, so I will describe it here. Currently, I am working with an oracle database and integrating it into an HTML website using javascript and php. I have successfully displayed the php file, but th ...

javascriptphphtmldatabase

Encountering a 404 error while using Angular HTML5Mode setting

I recently enabled pretty URLs in my Angular application by switching to html5mode. However, whenever I try to refresh the page, I encounter a 404 error. For instance, if I access my app through , everything functions as expected. But when I attempt to r ...

javascriptangular-ui-routerhtml5-historyangular1.6

"What could be the reason why the color property is not being applied to this

I have been attempting to change the color of an icon by using the color property, but for some reason, it is not applying as expected. Here is the code snippet I am working with: "& .MuiListItemIcon-root": { color: "red" }, ...

javascriptreactjsreact-hooksmaterial-ui

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

htmlcssangulartypescriptnebular

NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Currently, I am in the process of developing a simple side-drawer menu for my NativeScript application by following this helpful tutorial. I have successfully implemented it on a single page using the given code below. starting_point.xml: <Page xmlns ...

javascriptandroidxmltypescriptnativescript

My Vue.js accordion menu component is experiencing issues with toggle flags, causing it to malfunction

I have been working on my test case using Vue and I recently created a component called MultiAccordion. My intention was to open each slide based on the value of the status[index] flag. However, I am encountering an issue as this component does not seem ...

javascriptvue.js

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

htmlcsscss-floatz-index

The use of dangerouslySetInnerHTML causes the page layout to stretch, expand, or grow in size

I am currently working on my NextJs app, where I'm utilizing CosmicJs as a headless CMS to showcase content on the webpage. Within the layout of my page, I have structured it with 3 columns, and the content pulled from the CMS is meant to be displaye ...

cssreactjsnext.jsflexboxcosmicjs

How can we use JavaScript to add a class to the <html> element?

What is the method to apply a class to the root element <html> in JavaScript? ...

javascripthtml

Using TypeScript to Add Items to a Sorted Set in Redis

When attempting to insert a value into a sorted set in Redis using TypeScript with code like client.ZADD('test', 10, 'test'), an error is thrown Error: Argument of type '["test", 10, "test"]' is not assigna ...

javascriptnode.jstypescriptredisnode-redis

Unable to function in simplistic html/php code, 'Require' fails to operate as intended

I am facing an issue while attempting to import a header.php file into my index.php file. For some reason, it is not working as expected. header.php: <!DOCTYPE html> <html> <head></head> <body> <header> & ...

phphtmlrequire

failure in data transmission causing upload issues

Is there a way for me to prevent the character > from causing issues? I have a combo box with an option listed below. I attempted to replace > with &gt;, but it still isn't uploading correctly. <select name="Category3" id="Category3"> ...

htmlspecial-characters

Enhance JSON nesting with knockoutJS

I am currently working on updating a JSON object in memory using the knockout.js user interface. However, I have encountered an issue where changes made in the UI do not seem to reflect on the JSON data itself. To troubleshoot this problem, I have added bu ...

javascriptjsonknockout.js

Displaying a portion of a React functional component once an asynchronous function call has been successfully executed

I am currently using material-ui within a React function component and have implemented its Autocomplete feature. I have customized it so that when the text in the input field changes, I expect the component to display new search results. callAPI("xyz") I ...

javascriptreactjsmaterial-uireact-componentreact-async

"Exploring the Power of Angular Change Detection with Promises in a Hybrid

We are currently in the process of upgrading an AngularJS project to Angular 7 by following the recommended "hybrid" approach where both frameworks coexist. However, we have encountered some issues with change detection when dealing with native promises. T ...

javascriptangularjsangular

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

javascriptjqueryhtml

Is there a way to ensure that my off-screen menu functions properly across all web browsers?

I am in the process of developing a website for my school project and everything has been going smoothly so far. However, I encountered an issue when trying to open the site on different web browsers. The off-screen menu that I created using HTML/CSS seems ...

htmlcss