Bootstrap CSS issue

Question

I am little bit confused how to use Bootstrap CSS. I have two textboxes, a search button and image side to it. For fullscreen all elements should be in a row.

resizing screen, All elements should be one after another.

<div class="form-group" style="vertical-align: top; margin-right: 20px">
        <label for="name" style="color: #eea236">
            name:</label>
        <input type="text" class="form-control" placeholder="name" name="name" />
    </div>
    <div class="form-group" style="vertical-align: top; margin-right: 20px">
        <label for="organization" style="color: #eea236">
            City:</label>
        <input type="text" class="form-control" placeholder="organization" name="organization" />
    </div>
    
    <button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
        Search</button>
   
   
    <img src="xx.jpg" />

Please help....

Girish Rathod · Accepted Answer · 2016-05-09 05:03:57Z

1

<form class="form-inline">
    <div class="form-group">
        <label for="name">Name:</</label>
        <input type="text" class="form-control" id="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="city">City:</</</label>
        <input type="text" class="form-control" id="city" placeholder="City">
    </div>
    <button type="submit" class="btn btn-warning">Search</button>
    <img class="img-responsive" src="xx.jpg" />
</form>

answered May 9, 2016 at 5:03

Girish Rathod

6367 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Girish Rathod Over a year ago

This is simple inline form code used in bootstrap. getbootstrap.com/css/#forms-inline

austin wernli · Accepted Answer · 2014-11-07 21:52:11Z

You could add in display:inline-block on both those form-group div's

<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
        <label for="name" style="color: #eea236">
            name:</label>
        <input type="text" class="form-control" placeholder="name" name="name" />
    </div>
    <div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
        <label for="organization" style="color: #eea236">
            City:</label>
        <input type="text" class="form-control" placeholder="organization" name="organization" />
    </div>
    
    <button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
        Search</button>
   
   
    <img src="xx.jpg" />

user688074 · Accepted Answer · 2014-11-07 21:54:36Z

0

There is an image responsive class:

you can try adding:

<img class="img-responsive" src="xx.jpg" />

answered Nov 7, 2014 at 21:54

user688074

Comments

saruftw · Accepted Answer · 2014-11-07 21:54:55Z

0

Try adding this to your code display: inline i.e, Replace your top line with this .

<div class="form-group" style="vertical-align: top; margin-right: 20px; display: inline">

answered Nov 7, 2014 at 21:54

saruftw

1,2042 gold badges16 silver badges37 bronze badges

Comments

KaMZaTa · Accepted Answer · 2014-11-07 21:56:53Z

0

You need to use display: inline-block; property.

<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
    <label for="name" style="color: #eea236">
        name:</label>
    <input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
    <label for="organization" style="color: #eea236">
        City:</label>
    <input type="text" class="form-control" placeholder="organization" name="organization" />
</div>

<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
    Search</button>


<img src="xx.jpg" />

answered Nov 7, 2014 at 21:56

KaMZaTa

6003 gold badges13 silver badges31 bronze badges

Comments

Pau · Accepted Answer · 2014-11-07 23:47:56Z

0

You don't have to add any inline css. There is a built-in feature in bootstrap that would position the text boxes, buttons, etc. side by side in one row.

Your form should be wrapped in a <form> tag.

<form class="form-inline" role="form">
   *Your form groups here.*
</form>

That should make your form groups display inline, depending on the width of your browser. It should also be responsive as well.

answered Nov 7, 2014 at 23:47

Pau

5381 gold badge3 silver badges11 bronze badges

Comments

Giridhar Gada · Accepted Answer · 2016-07-01 09:06:11Z

0

<div class="form-group">
        <label class="col-xs-2 control-label" style="color:eea236">name:/label>
 <div class="col-xs-3"> 
        <input type="text" class="form-control" placeholder="name" name="name"/>
    </div>
<label for="organization" style="color: #eea236">City:</label>
<div class="col-xs-3">  
 <input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<div class="col-xs-3">
 <button class="btn btn-warning" type="submit">Search</button>
</div> <img src="xx.jpg" />
    </div>

answered Jul 1, 2016 at 9:06

Giridhar Gada

194 bronze badges

1 Comment

Brian Tompsett - 汤莱恩 Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.

Collectives™ on Stack Overflow

Bootstrap CSS issue

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related