CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Suraj
Suraj

Reputation: 41

align button and dropdown in a same line bootstrap

I need to align a button and a select drop down in a same line.

<button name="button" type="submit" class="pull-right margin-clear btn btn-sm btn-default-transparent btn-animated cart-class"
id="cart-classlatest-arrival1">Add To Cart<i class="fa fa-shopping-cart"></i>
</button>

<select class="form-control pull-left margin-clear btn btn-sm btn-default-transparent btn-animated custom-class">
    <option> 750 Gms </option>
</select>

Here's the fiddle for the same.

Upvotes: 1

Views: 1870

Answers (3)

Ian
Ian

Reputation: 151

Remove css class form-control under the select tag. Update the button tag and replace class pull-right with pull-left.

For responsiveness add this:

 @media (max-width: 320px) {
   button[type="submit"],
   select {
     width: 100%;
   }
 }

See: jsfiddlle demo

Edit: Added responsiveness support. Note: Please only paste relevant CSS and not the whole thing.

Upvotes: 1

Nirpendra Patel
Nirpendra Patel

Reputation: 679

you have .form-control with width set to 100% in your css. remove that and add width attribute to button and option menu seperately.

Upvotes: 0

DJAy
DJAy

Reputation: 330

Just add css -

.form-control{width: auto;}

Demo - https://jsfiddle.net/dhananjaymane11/spys5bex/4/

Upvotes: 0

Related Questions