Input field that adjusts its width based on screen size, accompanied by two buttons displayed side

I need a solution to display a text input and two buttons side by side. The buttons should take up only the space they require, while the text input should expand to fill the remaining space. It's important to have small margins between these elements, and I'd like to accomplish this using Bootstrap 4 classes.

Initially, I tried using three col-auto divs, but that resulted in the input having a fixed width of approximately 150px:

<!-- Input field - Should be as wide as possible -->
<div class='col-auto'>
    <input class='form-control'
           type='text'>
</div>

<!-- First button -->
<div class='col-auto'>
    <button class='btn btn-primary'>
        DO that
    </button>
</div>

<!-- Second button -->
<div class='col-auto'>
    <button class='btn btn-primary'>
        Do that
    </button>
</div>

I'm wondering if there is a more elegant way to achieve the layout I desire.

cssbootstrap-4

Answer №1

Ensure you have the most recent Bootstrap CSS CDN Link added to your project:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Then, here's the code snippet for you to try:

  <div class="container-fluid">
    <!-- 1st button -->
    <div class="row">
      <div class='col-auto'>
        <button class='btn btn-primary'>Do This</button>
      </div>

      <!-- 2nd button -->
      <div class='col-auto'>
        <button class='btn btn-primary'>Do This</button>
      </div>

      <!-- Input. Make it as wide as possible. -->
      <div class='col w-100'>
        <input class='form-control' type='text'>
      </div>
    </div>
  </div>

To summarize, utilize container-fluid, followed by row, apply col-auto on buttons, and use col and w-100 on the input field.

Answer №2

Create a Bootstrap grid layout with one row and three columns, two of equal size and one larger in size. Check out the sample code below:

<div class="row">
    <div class="col-sm-6" >
        <input class='form-control'
           type='text' >
    </div>
    <div class="col-sm-3" >
        <button class='btn btn-primary' style="width: 100%;">
            Click Here
        </button>
    </div>
    <div class="col-sm-3">
        <button class='btn btn-primary' style="width: 100%;">
            Click Here
        </button>
    </div>
</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

The vertical lines separating the buttons are not evenly centered

I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. HTML <div class='tab ...

htmlcssangular

Trouble with CSS: Struggling to apply margins to a line of images in React JS

I've encountered an issue where I can't seem to add margin to the row of images. The margin appears fine without any CSS when viewed on a wide screen, but once I scale it down to mobile view, the margin disappears completely. Even after attemptin ...

cssreactjssassflexbox

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

A challenge I'm facing involves creating a form with an input field that changes its border color when clicked. My goal is for the border to return to its original color when clicking anywhere else on the page. -HTML <form action=""> ...

javascripthtmlcss

Preloaded background images are loaded twice

I have a background image that I am preloading and caching, but my code is not reading it from the cache. It keeps loading the image as if it is not cached. Even though I have 8 images in the "imgSrcArray," I have simplified this example by hard coding jus ...

jquerycss

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

htmlcssfaviconionicons

Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...

htmlcsstwitter-bootstrapangularjsangularjs-directive

Prevent the layout from shifting with CSS

I am faced with a challenge regarding a grid of images that are dynamically generated on the screen. The number of images in each row of the grid is dependent on the size of the page. While everything functions properly when the page is at a certain size, ...

htmlcss

Troubleshooting problems with the height of nested DIV elements

Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...

csshtml

Avoiding ChartJS tooltips from being cut off

I've been exploring how to prevent chartjs from cutting off its tooltips, but I haven't been able to find a config option to address this issue. https://i.sstatic.net/Knzvd.png Here's what I've attempted so far: <script> ...

javascripthtmlcsschart.js

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

javascriptcssreactjs

Incorporating a recurring image beneath a navigation menu

I'm attempting to recreate a header that has a similar appearance to the following: https://i.stack.imgur.com/uVXs3.png However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles t ...

htmlcss

Move the div in an animated way from the bottom of the screen to the right

I am facing an issue with the image animation in my project. Currently, the image moves from the bottom to the left corner, but I want it to move from the bottom to the right corner instead. I have attempted using the transform translate property to achiev ...

css

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...

jquerycsscss-transforms

Using a jQuery if statement to target a particular div and apply custom CSS styling

I have encountered a unique challenge that I am struggling to solve. Imagine I have a 3x3 table created using div elements, and one of the cells has a background color of #999. My goal is to use jQuery to check if a specific cell has this background color, ...

htmljquerycss

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

htmlcss