Alignment of input



           
    <section class="newsletter text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 mx-auto">
                    <h2 class="mb-4">Sign up for our newsletter</h2>
                </div>
                <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                    <form>
                        <div class="form-row">
                            <div class="col-12 col-md-12 mb-2">
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

The code showcased in the above example can be viewed here: https://i.sstatic.net/RR0H7.png

If I wanted to position the button right next to the input field, how would I go about doing that?

htmlcssbootstrap-4

Answer №1

 <form action="">
       
   
       
       <input type="text"><span><button>submit</button></span>
    </form>
    
        //utilize a span tag in HTML or in CSS set display: inline-block

Answer №2

     &nbsp; &nbsp; &nbsp; &nbsp;
      <section class="newsletter text-white text-center">
        <div class="container">
          <div class="row">
            <div class="col-xl-9 mx-auto">
                <h2 class="mb-4">Subscribe to our newsletter</h2>
            </div>
            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                <form>
                  <div class="form-row">
                    <div class="col-12 col-md-9 mb-2 mb-md-0">
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                      <span><button>submit</button></span>
                    </div>  
                    
                      
                
                  </div>
                </form>
            </div>
          </div>
        </div>
      </section

Answer №3

This should be functioning properly You have successfully configured col to be 12

I have divided the space into 9 + 3 sections within a total of 12

              <div class="form-row">
                <div class="col-9 col-md-9 mb-2 mb-md-0">
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                </div>  
                <div class="col-3 col-md-3">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </div>

Answer №4

Follow these steps to implement the code:

&nbsp; &nbsp; &nbsp; &nbsp;
  <section class="newsletter text-white text-center">
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
            <h2 class="mb-4">Subscribe to our newsletter</h2>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
            <form>
              <div class="form-row">
                <div class="col-12 col-md-9 mb-2 mb-md-0">
                  <div class="d-flex">
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                  
                </div>  
              </div>
            </form>
        </div>
      </div>
    </div>
  </section>

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

Basic contact form with modal feedback

Hey there, I'm looking for a way to have a regular contact form on my webpage and once it's submitted, display the PHP action in a pop-up modal that says "Thanks for contacting us" before allowing users to close it. I've worked with HTML con ...

phphtmlmodal-dialogcontact-form

Various formatting options on GitHub Pages

As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues: While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite try ...

htmlcssgithub-pages

I decided to uninstall Bootstrap, but now I find myself unable to make any CSS changes

After attempting to uninstall Bootstrap, my application.css no longer seems to have any effect on my app. Any suggestions on how to resolve this issue? Here is a breakdown of the steps I took that led to this problem: - Removed require bootstrap from app ...

cssruby-on-railstwitter-bootstrapruby-on-rails-4

Retrieve the input fields from a webpage

I'm facing a challenge with a large number of form fields on my webpage, about 50 in total. Sending an AJAX request for each field seems like a daunting task, and could potentially clutter my code and make it less readable. Is there a way to efficient ...

htmlajax

Managing custom Bootstrap 4 styles and assets within Yii2 framework

Recently, I integrated the yii2-bootstrap4 extension into my yii2-advanced project and customized it using a Sass file named custom.css. After adding custom.css to frontend/web/css, I made modifications to frontend/assets/AppAsset.php as shown below: cla ...

cssbootstrap-4yii2

CSS ratings bar styling

Looking to create a unique ratings bar for my website, I have some questions that need answering. Take a look at the codepen link to see what I've come up with so far. My main query is about incorporating two different colors for Likes (green) and Di ...

cssprogress-barrating

Displaying the second div once the first div has loaded, then concealing the first div

Current Approach: There are two divs occupying the same space, with div1 set to display:block and div2 set to display:none When a tab is clicked, jQuery hides one div over a period of 2000ms and reveals the other div. Challenge: The goal is for the ...

javascriptjqueryhtmlcss

Tips for executing both onclick events and a href links simultaneously

boilerPlate.activityStream = "<div class='socvid-aspect-ratio-container'>"+ "<div onclick='com.ivb.module.home.pics.showDialogBox(\"{%=nodeId%}\",\"{%=class ...

javajavascriptjqueryhtml

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss

Automatically refresh and update HTML content

I've created a temp.php file that generates output in JSON format: [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{" ...

phphtmlajax

Tag - A guide on setting the required attribute for a tag

Currently, I am utilizing Jquery Tag it in order to manage tags and save the values in a database. My challenge lies in using jQuery to make the myTags field required, ensuring that at least one tag is added before proceeding with the save operation. This ...

javascriptjqueryhtmltag-it

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

htmlcss

The issue of Django Bootstap Modals not rendering modal content requires a solution

Having trouble creating a simple popup using Django Bootstrap Modal. I can't seem to get the linked content to show up in the modal body, even though the content is there when I try to access it. It's confusing why the linked content isn't r ...

pythondjangobootstrap-4modal-dialogbootstrap-modal

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss

Creating equality in height among input file fields and other elements with Bootstrap 5

Utilizing a straightforward template to display a registration form with a file attachment field: /* facing an issue when adjusting the height for myself */ .mycustom { line-height: 2.75; z-index: 999; } <!-- <a href="/cdn-cgi/l/email-protecti ...

htmlcssbootstrap-5

Flexbox presenting a specific alignment issue

I'm facing a challenge using Flexbox to achieve the desired result shown below https://i.sstatic.net/8vJGQ.png When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this l ...

htmlcssflexbox

Utilize the grid system from Bootstrap to style HTML div elements

I am working on my angular application and need help with styling items in a Bootstrap grid based on the number of elements in an array. Here's what I'm looking to achieve: If there are 5 items in the array, I want to display the first two items ...

htmlcssangular

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

jquerycssajax

The Bootstrap tooltip fails to display the visual style of the tooltip, only showing the data

Following the Bootstrap documentation for tooltips, I have tried to make the tooltip function work properly. However, when I hover over the text, the tooltip text Some tooltip text! only shows up with the alt="" function, but not styled as described in the ...

javascriptjqueryhtmltwitter-bootstrap