CODEWITHSUNDEEP
csstwitter-bootstrap
Nanda Nada
Nanda Nada

Reputation: 1

Bootstrap CSS issue

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

Upvotes: 0

Views: 86

Answers (7)

Giridhar Gada
Giridhar Gada

Reputation: 19

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

Upvotes: 0

Girish Rathod
Girish Rathod

Reputation: 616

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

Upvotes: 1

Pau
Pau

Reputation: 538

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.

Upvotes: 0

KaMZaTa
KaMZaTa

Reputation: 741

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

Upvotes: 0

saruftw
saruftw

Reputation: 1174

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

Upvotes: 0

user688074
user688074

Reputation:

There is an image responsive class:

you can try adding:

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

Upvotes: 0

austin wernli
austin wernli

Reputation: 1801

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

Upvotes: 0

Related Questions