Can you employ a right-side offset in Bootstrap 4?

Is it possible to align a button with a textbox using the Bootstrap 4 layout system?

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text"/>
  </div>
  <div class="col col-4">
    <input type="text"/>
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col">
    <input type="button" class="btn" value="Go"/>
  </div>
</div>

I am aware that I can place everything in the same row and align the button under the textbox, but this would require creating a new CSS class for adjusting spacing... I am seeking a cleaner solution utilizing the existing Bootstrap 4 classes.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you place more than a dozen columns in a single row, any additional columns will wrap onto a new line as a cohesive unit. - Bootstrap

For the button's column, utilize the col-8 text-right class.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-8  text-right">
      <button type="button" class="btn btn-primary mt-4">Go</button>
    </div>
  </div>
</div>

Answer №2

If you desire to create space between the columns, one approach is to reduce the width of (col-3) for the input columns and apply an offset on the second column...

<div class="container-fluid">
    <div class="row justify-content-center mb-4">
        <div class="col-3">
            <input class="mx-auto form-control" type="text">
        </div>
        <div class="offset-1 col-3 text-center">
            <input class="mx-auto form-control" type="text">
        </div>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-7 text-right">
            <input type="button" class="btn" value="Go">
        </div>
    </div>
</div>

Answer №3

Perhaps I would approach it like this.

input {
  width: 100%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text" />
  </div>
  <div class="col col-4">
    <input type="text" />
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col-8 d-flex justify-content-end">
    <button type="button" class="btn">Go</button>
  </div>
</div>

Answer №4

Implement the form grid system by including the .form-row class below the form tag. This will simplify aligning the button correctly.

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

Blank space appearing at the bottom of webpage

I have a strange issue with my document where there is a small white gap at the end. Upon inspecting the element, it seems to be related to the body. Any suggestions on how to resolve this? ...

htmlcss

A thrilling twist on the classic game of Tic Tac Toe, where X and

I am having trouble with switching between the cross and circle symbols in my Tic Tac Toe game. The code seems to be set up correctly, but it's not functioning as expected. Any suggestions on how to fix this? Here is the JavaScript code: varcode va ...

javascriptcsshtml

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

cssoverflowfont-sizetext-indent

Adjust the state based on the event in ReactJs

I have the following code snippet in a React JS application: const items = [ { value: "A", label: "A" }, { value: "B", label: "B" }, { value: "C", label: "C" }, { value: "D", label: "D" }, { value: " ...

cssreactjs

Declare a jQuery variable containing HTML elements

Greetings! I am facing an issue while attempting to create a jQuery variable that stores a table meant for displaying in different sections of a website. Unfortunately, I am encountering an error and struggling to comprehend the reason behind it. Below is ...

jqueryhtmlvar

The color of the progress bar shifts according to its value

In my MySQL database, there is a field called progress_profile where I input values ranging from 1 to 100. $progress = $row['progress_profile']; Within the bootstrap-bar code, the following snippet is implemented: <p class="bioheading">P ...

bootstrap-4field

The navigation bar remains fixed while the section heading fails to display properly

================================= My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking o ...

javascripthtmlcss

What is the best choice for the navigation menu: using `<ul>` or `<div>`?

Is it considered unprofessional to construct a navigation menu without utilizing unordered list tags? For instance, opting for <div> elements instead. <div class="navbar"> <a href="#"> Home </a> </div> ...

htmlcss

Using JQuery to search for and remove the id number that has been clicked from a specific value

I am in need of assistance with deleting the clicked id number from an input value using jQuery. I am unsure of how to proceed with this task and would appreciate some guidance. To simplify my request, let me explain what I am trying to accomplish. Take ...

javascriptjqueryhtml

Material UI's Paper component is not expanding to full width when viewed on a smaller screen size

I'm currently working on a website project and utilizing a component for displaying dark mode. However, I've encountered an issue where the Component shrinks excessively when the screen size goes below 600px, unlike other components. This is a s ...

cssreactjsmaterial-uistyleddocument

Utilize HTML search input to invoke a JavaScript function

I am currently facing an issue with a navbar form that I have created. The goal is to allow users to input either a 3 digit number or a 5 digit number, which should then trigger a function to open a specific link based on the input. However, I am strugglin ...

javascripthtmlforms

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

Floating and scrolling navigation bar not functioning properly in bootstrap framework

I've been dabbling in coding for a while now, practicing at my current job. I managed to create a floating and scrolling navigation bar on the right side of my website using bootstrap. However, after taking a 3-week break and returning to my site, I n ...

jqueryhtmlcss

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

htmlangulartypescript

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

What is the reason behind fixing an overflow issue simply by moving the mouse outside of a container in IE7 and HTML?

My webpage includes a series of questions, with each question being displayed or hidden based on the answer to the previous question. Occasionally, after toggling back and forth between questions, I notice that the final question appears below its designa ...

htmlcssmouseevent

Is it possible to create a CSS-only negative border radius?

I'm reaching out for help with a specific issue. I want to create a unique negative border radius for my navigation links, similar to the design shown in this image: http://prntscr.com/9vi0b5 Instead of using images like in the example, I'm look ...

csscss-shapes

Steps to include a horizontal divider in the footer section of an angular-material table

Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...

cssangularangular-material

Android mobile browser lacks visibility of certain elements

please provide a brief description of the image The issue I am facing is consistent across all mobile browsers, with the exception of Firefox. It also manifests in Windows Chrome devtools mode and when the device toolbar is activated. I came across a sim ...

htmlcss