What could be causing my input form to not stay connected with my button?

Can anyone help me figure out why my input-form is not staying aligned with my button?

I am incorporating bootstrap into my django website.

  <div class="container" style="margin-top: 20%; margin-bottom: 20%";>
    <div class="col-md-6 col-md-offset-3">     
        <div class="row">
            <div id="logo" class="text-center">
                <h1 style="font-size:500%";>Zaira.io</h1><p style="font-size:120%";>Test</p>
            </div>
            <form role="form" id="form-buscar">
                <div class="form-group">
                    <div class="input-group">
                        <input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
                            <span class="input-group-btn">
                                <button class="btn btn-success btn-lg" type="submit">
                                    <i class="glyphicon glyphicon-search" aria-hidden="true"></i> Search
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>            
    </div>
</div>

Check out a screenshot of the website here

htmlcssbootstrap-4

Answer №1

It seems like you are attempting to construct an input group. If that's the case, modify the class input-group-btn to input-group-append on the line with 

<span class='input-group-btn'>
. Check out this example for a visual representation of the change.

Answer №2

For more information on using input groups with bootstrap, visit this page: https://getbootstrap.com/docs/4.0/components/input-group/. It's recommended to avoid using the span element in this scenario, as it is an inline element and not suitable for positioning objects. Instead, use the input-group-prepend and/or input-group-append classes when necessary for buttons and other elements.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Input Website Url" aria-label="Input Website Url" aria-describedby="basic-addon2">
  <div class="input-group-append">
   <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
</div>

Answer №3

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Example using Bootstrap</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="col-md-6 col-md-offset-3">     
        <div class="row">
            <div id="logo" class="text-center">
                <h1 style="font-size:500%";>Zaira.io</h1>
             
            </div>
            <form role="form" id="form-buscar">
             
                <p style="font-size:120%";>Test</p>
                        <input id="1" class="form-control input-lg" type="text" name="search" placeholder="Enter Website Url" required/>
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>


 
    
   </form>
     </div>
   </div>
  </div>

</body>
</html>

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

Changing the entire content of a webpage from the server using AJAX

I am looking to update the entire page content with the click of a button, transitioning from Words.html to SelectNumber.html This snippet is from Words.html <html> <head> <meta charset="UTF-8"> <title>Number Game< ...

javascripthtmljquerycssajax

Creating a visually stunning image grid akin to the meticulously designed layouts found

Forgive my lack of knowledge, but I'm curious about how to create an image or text grid similar to Tumblr using HTML and CSS. I'm looking to achieve a layout like this: ...

javascriptjqueryhtmlcss

Modifying the bullet style for the navigation bar list in Bootstrap 4

Is there a way to remove the bullet point that appears alongside the navigation menu items in Bootstrap 4/Jhipster? Currently, each item has both a bullet and an icon <i class="fa fa-home" aria-hidden="true"></i>, but I want to get rid of the ...

cssnavbarbootstrap-4

Selecting specified elements in Jsoup using CSS selectors

Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...

htmlcssjsoup

The onClick function for the "div" element is failing to append

I am currently working on a project that involves searching for strings in a database and then appending the selected string to a text box. So far, I have been successful in retrieving the search results from the database and appending them below the text ...

jqueryhtmlclickappend

a shadowy see-through veil for division

I'm currently working on adding a dark transparent overlay to the product div whenever someone hovers over the product image. I've successfully created overlays for the entire screen in the past using similar logic, but this time it's behavi ...

jqueryhtmlcss

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Currently, I am working with two parent flex items, arranged with flex-direction: column. Within the first parent, there are two children. However, one of the children is optional and may be removed at times. I aim to have the optional child displayed on ...

javascripthtmlcssflexbox

What are some ways to display unprocessed image data on a website using JavaScript?

I have an API endpoint that provides image files in raw data format. How can I display this image data on a website using the img tag or CSS background-image property, without utilizing canvas? One possible approach is shown below: $.get({ url: '/ ...

javascripthtmlcssimage

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

htmlcsssvg

Employing Selenium for extracting the id_str element

Currently, I am utilizing the Selenium library in python to scrape content from a twitter search results page: https://twitter.com/search?q=twinkie&src=typd&lang=en The Selenium library provides several functions to help identify the desired conte ...

pythonhtmlseleniumweb-scraping

Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover; .menu{ border-radius: 50%; width: 100px; height: 100px; background: white; box-sha ...

csshover

The conversion of XML to HTML using setQuery(QString) in QXmlQuery is unsuccessful

Whenever I use the method setQuery(QUrl(file.xsl)), it functions properly. However, if I first load the file into a QString and then invoke setQuery(theString), the subsequent evaluateTo() operation fails (resulting in a boolean exception and empty result) ...

htmlxmlqtxsltqxmlquery

Modifying the dimensions of a text input box within an HTML string using React

I'm currently utilizing a popup library called sweetalert2-react-content to generate a popup box with a textbox and a text area. Even though the elements are being created successfully, I am struggling to adjust the size of the text area in the popupb ...

htmlreactjs

Is there a way to create a mobile-exclusive slideshow using JavaScript?

I am trying to create a slideshow on my website, but whenever I add JavaScript it seems to break the desktop version. I want these three pictures to remain static and only start sliding when viewed on a mobile device. I have searched for resources on how t ...

javascripthtmlcss

Guide to enabling picklist editing in the specified component within an Angular application

Currently utilizing the p-picklist component and looking to customize the displayed data in the target list span. You can find the source code at: Is there a way to enable editing of the product name within the target list? <p-pickList [source]=&quo ...

htmlangularprimengpicklist

Tips for updating the color of the first td element in a table using a specific class

Below is the CSS code for my table: table.show-my-request-table { border: 1px solid black; margin-left:auto; margin-right:auto; border-collapse: collapse; } tr.show-my-request-table-header{ border: 1px solid black; } tr.show-my-requ ...

htmlcssimagehtml-tablecss-selectors

Container Floating, Margin Collapse, and Block Formatting Contexts

To truly grasp the function of a block formatting context, I am exploring what happens when one is not created. I found an interesting demo in the article "Everything you Know about Clearfix is Wrong: .wrapper { width: 740px; background: #ccccc ...

htmlcsscss-floatcss-positionhaslayout

Discover the steps to position the bootgrid pagination control above the table

Is there a way to customize the pagination control so that it appears at the top of the table, across its heading row, rather than at the bottom? It's likely a CSS solution... I attempted to make adjustments based on the advice in this unanswered qu ...

jquerycsstwitter-bootstrappaginationjquery-bootgrid

After the page loads, the Facebook Like button causes my website content to shift downwards by 1 pixel

Why does the like button push down my website content by 1 pixel after loading? Any ideas on what might be causing this issue? Check out the website: See the problem in action here: ...

htmlcssfacebook

Arrange elements in a TD in a row side by side using HTML

I just added a slider next to an input and added an input box after the slider. The problem is they are underneath my first input. I want them all side by side in the TD tag. Please help. Let me know if you need more code: <td>$ <input name=" ...

htmlcss