CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
gia beraia
gia beraia

Reputation: 63

bootstrap form-groups in input

I need your help with bootstrap form-group`s.

this is my html

<form action="#" class="form-inline" role="form">
    <div class="form-group no-margin">
        <input type="text" class="form-control no-margin" placeholder="Search..." />
        <select class="form-control selectcity no-margin" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <div class="input-group date no-margin" id="datetimepicker1">
            <input type="text" class="form-control col-md-3" placeholder="თარიღი" style="padding: 0 5px;" />
            <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <button class="btn btn-blue" type="submit">Search</button>
</form>

it looks like they are inline but they have margin from each other. I tryed margin:0 in css but it not working please help me.

this image shows how it looks now

Image 1

and on this image is how I need to be

Image 2

please help me.

Upvotes: 1

Views: 116

Answers (1)

dfsq
dfsq

Reputation: 193261

This is default behavior of inline/inline-block elements: they respect whitespaces between them, including newlines, tabs, etc. The simplest fix in your case is to set font-size: 0 to .form-group container, so that whitespaces are effectively rendered as zero-width:

.form-group.no-margin {
    font-size: 0;
}

This is trick won't affect inner input elements, as for they have more specific font-size settings, but gaps between will disappear.

Upvotes: 1

Related Questions