CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
TheNiceGuy
TheNiceGuy

Reputation: 3730

Button not inlined on smaller devices

I have a form that looks like this (on a big device, e.g. pc monitor)

Screenshot

that is as it should be. On smaller devices it however looks like this:

enter image description here

the button is no longer in the same line as the input. My code looks like this:

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

How can I ensure that it also is aligned correctly when using smaller devices? PS: Bootstrap is being used

Upvotes: 1

Views: 28

Answers (3)

Mr Nellinger
Mr Nellinger

Reputation: 108

Have you tried stacking the bootstrap col classes?

The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.

You could also consider putting them in the same div.

Your code modified 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>

Upvotes: 0

pjones235
pjones235

Reputation: 540

Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:

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

Upvotes: 0

Sensoray
Sensoray

Reputation: 2420

Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.

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

Upvotes: 1

Related Questions