center items on page using bootstrap grid system

Why is my button not aligned with the input field when using Bootstrap as an example?

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="row">
  <div class="d-flex flex-row">
    <div class="col-8">
      <div class="form-group">
        <label>Search:</label>
        <input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
      </div>
    </div>
    <div class="col-1">
      <div class="">
        <button class="btn btn-primary" onclick="load();">Load</button>
      </div>
    </div>
  </div>
</div>

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

htmlcssbootstrap-4

Answer №1

It's as simple as moving the label outside of the flex-container:

<!-- Bootstrap-5 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
 <label>Search:</label>
<div class="row">
  <div class="d-flex flex-row">
    <div class="col-8">
      <div class="form-group">
        <input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Required" />
      </div>
    </div>
    <div class="col-1">
      <div class="">
        <button class="btn btn-primary" onclick="load();">Load</button>
      </div>
    </div>
  </div>
</div>

Answer №2

Welcome to the latest Update markup

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="container">

  <p>Search</p>
  <div class="row d-flex justify-content-flex-end">

    <div class="col-8">
      <div class="form-group">

        <input type="text" name="name" id="search-id" autocomplete="off" class="form-control" placeholder="Search Here" />
      </div>
    </div>
    <div class="col-1">
      <div class="">
        <button class="btn btn-primary" onclick="load();">Load</button>
      </div>
    </div>

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

What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

I'm currently working on designing a top navigation bar that features a logo with color #1 as the background on the left side. The logo is then separated by a grey horizontal divider, followed by color #2 representing the application name beside the d ...

javascripthtmlcss

Log into your account by choosing a button using Selenium with Python

While attempting to access my account via this specific link on the Market Watch webpage using Python and Selenium, I encountered a roadblock. Despite successfully selecting the "Sign In" button, no action is triggered, preventing me from entering the desi ...

pythonhtmlseleniumbuttoncss-selectors

Creating a scrollable HTML5 div container with fixed divs positioned within it

I am attempting to develop an app container that mimics the functionality of Microsoft Excel. The container should scroll both horizontally and vertically, with fixed headers on the left and top that move along with the content. Here is a rough representat ...

csshtmloverflowcss-position

Different methods for incorporating script-specific data into markup

How can we include extra meta data in HTML code to support client-side javascript functionality? Let's consider some straightforward examples: A list of contacts that, when clicked, displays their location on a map. For instance, how can we link la ...

javascriptjqueryhtmljson

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

I am a beginner in the world of coding. Currently, I am working on creating templates for an online software application. Users will have the option to select from different choices using radio buttons. However, I want to ensure that users are not redirect ...

javascripthtml

Content Division with Sticky Footer

I have successfully made my footer stay at the bottom of the page by following this method: Now, I am facing an issue where my #content div has borders on the left and right sides but does not expand to match the height of the #wrapper. Your help in reso ...

htmlcssxhtml

Reducing the size of icons on a small screen using Bootstrap 4

Is it possible to decrease the size of icons on small screens in Bootstrap 4? I am currently working on a Bootstrap project and my aim is to reduce the size of icons specifically on smaller screens. For example, when the screen size is Mobile S-320 PX, I w ...

bootstrap-4font-awesome

Looking to save a CSS element as a variable

I am working on improving the readability of my code in Protractor. My goal is to assign a CSS class to a variable and then use that variable within a click method. element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).cl ...

javascriptcssangularjsprotractor

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

I am dynamically creating multiple <a href="#"></a> elements with dynamically assigned id attributes like <a href="#" id='delete"+id+"'></a>. The IDs generated will be like delete01, delete02, .... I want to trigger a func ...

javascriptjqueryhtml

Can the width of an offcanvas panel be adjusted?

Currently implementing the offcanvas component in my project, but I'm looking to make the panel wider than the standard size. Specifically, I want it to be 35% width. I've attempted to utilize the panelClass NgbOffcanvasOptions property, however, ...

htmlangularbootstrap-5ng-bootstrap

How can I implement a division animation with Javascript upon clicking a hyperlink?

I need help with animating a div when clicking on a link. Specifically, when clicking on the "About" link, the height of the div should change. Currently, the height is set to '0em' in the CSS file. I attempted to change the height using "documen ...

javascriptjquerycssanimationhyperlink

audio enhancement in a web-based game

I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...

javascripthtmlhtml5-audio

Assigning a distinct identifier to every item in a dropdown list in MVC

I'm struggling to assign a unique ID to each element in a SelectList (using @Html.DropDownListFor). The current structure of the div in the view is as follows: <div id="Courses"> @Html.DropDownListFor(c => c.Courses, new SelectList(Model ...

javascriptc#jqueryhtmlrazor

What are some effective ways to utilize CSS translateZ?

I'm attempting to create a new layer of content with CSS, but I'm having trouble adjusting the depth of the element using the translateZ property. I tried using some codepen code to achieve a 3D effect. Below is the HTML, CSS, and Javascript cod ...

htmlcss

Modification of a CSS element

The CSS I am working with looks like this: .cls .imageX { float:left; } .cls .imageY { float:right; } It is currently being used on a page in this way: <div class="cls"> <a href="" class="imageX"><img src="left.png"/></a> &l ...

javascriptjqueryhtmlcss

access the database information within the fullcalendar plugin

I've been exploring the calendar code on arshaw/fullcalendar and made some modifications, but I'm still unsure how to link JavaScript with a database. Here is the original code: $(document).ready(function() { var date = new Date(); var d = dat ...

javascripthtmlmysql

Difficulty with Setting HTML input Character Limit on Oppo F3 Plus when using Chrome Browser

Encountering an issue in the Chrome browser on the OPPO F3 Plus device with a maxlength=100 set on an input type of text, but it is not allowing entry beyond 63 characters. Device Name : OPPO F3 Plus Browser : Chrome v71 For example: <input type="tex ...

htmlvalidation

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

While using the md-datepicker component in my application, I noticed that it does not display properly on larger browser widths. It only seems to work as expected on small and x-small viewports. Please refer to the attached screenshot for reference. This ...

javascriptcssangularjsdatepickerangular-material

How can CSS be leveraged to generate a fluid and adaptable grid layout for icons?

Please note that using a script is not an option for me My goal is to include a set of 12 100X100 icons at the bottom of emails sent to customers. These icons should be displayed with 100% width and evenly spaced, like this: X X X X X X X X X X X X If t ...

csshtmlalignment

Designing a drop-down selection interface

http://jsfiddle.net/367ms/1/ I need assistance with my code. My goal is to have a blue border that appears 10 px below the text when hovered over. Additionally, I have a submenu that opens on hover, but it automatically closes when trying to navigate down ...

htmlcss