two adjacent entrances have a shared activation button

https://i.sstatic.net/dsS9R.pngI'm working on a form with multiple fields, and I want to have a common button for just 2 of the inputs. However, I'm having trouble aligning it properly without affecting the rest of the layout.

Here is what I've attempted so far. The first two input fields should share a common button:

<div class="container">
<div class="row">
  <div class="col">
<div class="form-group pt-4">   
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
<div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
</div>  
   <div class="col">
     <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button> 
  </div>
  </div>
csstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to center the button between two input elements, you can experiment with using display: table for the .row class. This solution might resolve your alignment issue.

.row {
  display: table;
  width: 100%;
}
.row .col{
  display: table-cell;
}

.col1 {
  width: 40%;
}

.col2 {
  position: relative;
  vertical-align: top;
}

.col2 button {
  position: absolute;
  top: 30px;
  left: 0;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" >
</head>
<body>
<div class="container">
<div class="row">
  <div class="col col1">
<div class="form-group pt-4">
   
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
   <div class="form-group">
   
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
</div>
 
  
   <div class="col col2">
     <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button> 
  </div>
  </div>
  </div>
  </body>
  </html>

To make the button larger, consider adding padding or adjusting its height as needed.

Check out the Codepen link for a live example.

Answer №2

To properly implement bootstrap 4, follow the example below:

Combine the two inputs within a single .col and place the button in another .col with the classes 

flex-grow-0 flex-shrink-1 mb-3 d-flex
. This will shrink the container to the minimum button width and ensure there is enough margin at the bottom.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="form-group pt-4">
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
          </div>
        </div>
        <div class="col flex-grow-0 flex-shrink-1 mb-3 d-flex">
          <button type="submit" class="btn btn-secondary mt-4"><i class="fas fa-ellipsis-v"></i></button>
        </div>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
  </div>
</div>

Answer №3

col-auto in Bootstrap version 4.0.0 does not include padding. It's recommended to update to the latest version of Bootstrap 4, which is version 4.6.0

To organize your layout, use two .row classes. The first .row should contain the first two inputs and the button, while the second .row should accommodate the remaining inputs.

For the button column, utilize .col-auto and .d-flex classes to ensure it takes up the necessary space and full height.

Add a margin-bottom using the .mb-3 class for the button to match the margin-bottom of the .form-group.

Consider using .btn-outline-secondary instead of .btn-secondary

  <div class="col-auto d-flex ">
      <button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
  </div>


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333475d455d43">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="form-group pt-4">
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>

    <div class="col-auto d-flex">
      <button type="submit" class="btn btn-outline-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
  </div>

🎁

By following these guidelines, you can prevent excessive nesting of .row and .col.

Answer №4

Here's a different approach, revising the structure using only Bootstrap classes for styling.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col  ">
      <div class="form-group pt-4">
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
    <button type="submit" class="btn btn-secondary mt-4 mb-3"><i class="fas fa-ellipsis-v"></i></button>
  </div>
  <div class="form-group row pl-3">
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </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

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

cssprimefaces

Disappear Image Overlay when Mouse Hovers

Currently, I am in the process of working on a new webpage. You can view the progress at the following link: . When hovering over the Referrals Button, a Background Overlay will appear. To enhance the visual effect, I am looking to implement a gradual appe ...

cssjquery-animateoverlay

Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines. https://i.stack.imgur.com/CcDeL.png Code: .Footer { width: 100%; display ...

htmlcss

What is the most efficient method to iterate through Angular 4 using Bootstrap columns?

I'm trying to arrange my list into different columns using Bootstrap. The first row should have three columns The second row should have two columns The third row should have only one column Here is the code I have: <div *ngFor="let watch of L ...

angularbootstrap-4

Having trouble embedding the video in an iframe. Any tips on how to make it work?

I have encountered an issue while trying to embed a video in my WordPress site using an iframe. The video is not displaying completely on the page, with only the left part visible and the rest being cut off. Here is the code I am currently using: <P A ...

htmlcssvideoiframeembed

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

javascripthtmlcsscheckbox

A div element floating next to another div element with a width of 100%

My goal is to align a div next to another div whose contents have a width: 100%. Here is the current markup: <div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div> <div id="outer_wrapper" style="position: relative; f ...

htmlcss

The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code: <div style="min-width: 1000px;"> <p> Some text </p> <div class='div_img_left'> <img src="images/sth.png" alt="missing image" style="max-width ...

htmlcss

Loading external JSON and images located beyond the root directory

Currently, I am attempting to load a JSON file and a set of images from a directory located above my root directory. Although the code I have works, I believe there may be a more efficient way to achieve this. $.getJSON("http://localhost/folder1/folder2/f ...

javascriptcssjson

How to incorporate Django syntax into CSS styling

Imagine a scenario where a Django site is equipped with numerous stylesheets. CSS and JS files are located in the static/ directory within an app's folder or in the global site directory. Various color themes are employed across different pages, neces ...

pythondjangocss

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

javascripthtmlcssbootstrap-4

Quiz12 - The Influence of Inheritance on CSS

How will the text size of "Universe" be affected by the following declaration? <div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div>< ...

css

The color of the bootstrap button appears incorrect on Chrome browser (Mac) for some reason

I was in need of a grey color for my button, so I opted for the Bootstrap button which helped me achieve my desired look. However, an issue arose when viewing it on Chrome on a Mac system - it displayed a white background instead of grey. Can someone prov ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

I'm not sure how to use the global .container CSS style in Next.js for multiple pages

I'm currently diving into the world of React and Next.js, tackling a project with Next.js. I've set up a global CSS file with a .container style definition which I imported in my _app.js file. However, I'm unsure how to apply this global sty ...

cssreactjsnext.jsglobal

Add a filter and set a background color on the rows in jqGrid

After analyzing the code and output in firebug, I can filter the td and assign a different background color based on certain conditions. Here is the code snippet: loadComplete: function() { var i, names=this.p.groupingView.sortnames[0], l = n ...

jquerycssjqgrid

Utilize a personalized container for the slider's thumb within a React application

Is it possible to replace the slider thumb with a custom container/div in React instead of just styling the thumb or using a background image? I have found a codepen example that demonstrates what I am trying to achieve, but unfortunately I am having trou ...

htmlcssreactjsslider

Dynamically adjust the height of a parent div to match its child div's height upon clicking using JavaScript

Within my div element (divChatContainer), there is a top div (divChatContainerTop) containing a "span" element. When this "span" element is clicked, I want the container div to resize to the height of the "divChatContainerTop" (essentially minimizing the c ...

javascripthtmlcss

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 ...

cssmodal-dialog

What is the best way to include a variable or literal as a value in styled components?

When it comes to managing various use cases, I always rely on props. However, I am currently facing a challenge in changing the border color of a styled input during its focus state. Is there a way to utilize props for this specific scenario? Despite my f ...

javascriptcssreactjstypescriptstyled-components

Displaying divs of varying heights in a line

I'm facing a challenge in creating floating divs, just like illustrated in the image provided in the link below. Currently, I am employing the float left property to align all the divs next to each other. The first picture displays the default layout ...

jqueryhtmlcss