Button fails to align properly on smaller screens

I am facing an issue with the alignment of a form on different devices. The form looks correct on larger devices, like PC monitors, as shown in this image: https://i.sstatic.net/FiEyt.png

However, on smaller devices, it appears like this: https://i.sstatic.net/zEONs.png

The button is no longer on the same line as the input field. Here is a snippet of my code:

<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-10">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-md-2">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </div>
        </div>
    </div>
</div>

I am using Bootstrap in my project. How can I ensure that the form is correctly aligned on smaller devices as well?

htmlcsstwitter-bootstrap-3

Answer №1

Ensure that your columns have the col-md class, indicating that they will expand to full width when the screen size is less than 992px. To keep them in line, add the col-xs classes with the appropriate sizes for your columns.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-xs-10">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-xs-2">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </div>
        </div>
    </div>
</div>

Answer №2

To ensure both the input and button are displayed inline and in the same column, you can use the following code snippet:

<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md">
                <input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
                <a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
            </div>
        </div>
    </div>
</div>

Answer №3

Have you experimented with stacking the bootstrap col classes on top of each other?

The lg / md / sm classes are designed for different screen sizes, so using a combination of them can help you specify how much space each element should occupy based on the scenario. You might want to take some space away from that input field.

Another option is to group them within the same div element.

Here's your code with stacked col classes:

<div class="form-group ">
    <label class="col-md-2 control-label">Title</label>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-10 col-sm-6">
                <input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
            </div>
            <div class="col-md-2 col-sm-6">
                <a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
            </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

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular backgroun ...

javascriptjqueryhtmlcss

Is there a way to position the table to the right of the registration text boxes?

https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...

htmlcssformshtml-tablealignment

How can I stop MUI Button from automatically becoming fullWidth?

One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...

cssreactjsmaterial-ui

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

cssvue.jsvuejs2vuetify.jsv-tooltip

Sending information via HTML on an iPhone

Posting form data on a website typically involves using the following HTML code with a post request: <div id="requestinfo"> <form method="post" action="http://abc/form-post.php" id="request_form"> <input type="hidden" name="fiel ...

iphonehtmlhttp-post

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

Combining various array values into a single key in JSON格式

Issue: I am working on a sign-up form for new users using HTML. The goal is to store multiple arrays (each containing "username: username, password: password, topScore: 0) within one JSON key ("user" key). However, the current functionality only allows f ...

javascripthtmlarraysjsonobject

What is the best way to trigger the Save as ..dialog by clicking on an image?

Below is the code snippet provided. When the link is clicked, a save as dialog should pop up. <a href="http://www.experts-exchange.com/xp/images/newNavLogo.png" target="_new"> <img src="http://www.experts-exchange.com/xp/images/newNavLogo.png" a ...

javascriptjqueryhtml

The Ajax request is displaying the URL instead of the expected posted data

Here is the html code along with JavaScript that I am working on: <div id="input_form"> <fieldset> <form id="myform" method="post" action=""> seq: <input type="text" name="seq" id = "seq"><br><br> ...

pythonhtmlajaxflask

Creating a responsive div class that is centered

Struggling to center my <div class="loginfeld"> while keeping it responsive. <html> <body> <div class ="loginfeld"> <div class="container"> <div class="col-lg-4"></div> ...

htmlcssbootstrap-4

Having trouble showing the image stored in the database on the webpage

I'm having trouble displaying my full image on my webpage from the database. Here is my code snippet: $con= mysqli_connect("localhost", "root", "", "project"); if(!$con) { die('not connected'); } ...

phpcssdatabase

divs aligned vertically on opposite edges of the webpage

Our web app is being embedded in a third party page as an iframe, but we need to add a bottom "toolbar" with 2 links. One link should be plain text and the other should display our company logo preceded by some text. We want the two links to be positioned ...

htmlcssvertical-alignment

When the React button is clicked, it displays a stylish blue border

Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !impo ...

cssreactjsbuttonsassreact-bootstrap

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

javascriptjqueryhtmlcssfonts

Content editable div causing overflow issues in Internet Explorer

I am having trouble with a content editable div where the text is not wrapping properly. I attempted to use "overflow:scroll" but it only ends up cutting off the text horizontally. https://i.stack.imgur.com/WlMdY.jpg ...

csshtmlinternet-explorer

What is the most effective method for determining the distance between two UK Postcodes?

Can you suggest a reliable method for calculating the distance between two UK postcodes in order to determine if they are within range? I do not intend to display a map, but instead provide a list of results for valid locations. For example, showing loca ...

javascripthtmlmapsdistance

Navbar links in Bootstrap unexpectedly expanding in width

My website has a navigation menu that looks like this: https://i.stack.imgur.com/1R8mv.png However, when I click on a menu item, the link container inherits the width of the dropdown menu. Is there a way to prevent this using purely CSS? I am currently ...

htmlcsstwitter-bootstrapdrop-down-menudropdown

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

Unable to eliminate blue highlighting in Chrome when an element is in focus

After clicking on the search button, there seems to be a persistent blue outline that CSS is not correctly removing despite the settings I've applied. Here is the CSS code I have used: input:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); outl ...

htmlcss

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

When it comes to my form, I have a select menu that sends data to an SQL database and then fetches it back when it is called for editing. The value being edited should be displayed in the select menu option as selected. Here's a peek at my code: < ...

htmlangulartypescriptcrud