0

I have this code:

<div class="container">
    <div class="row">
        <div class="col-xs-12">

        </div>
    </div>
    <div class="row">
     <form class="form-horizontal">
               <div class="col-md-3">
                    <input type="text" class="form-control input-lg" placeholder="Your Title">

                </div>


               <div class="col-md-3">
                    <input type="text" class="form-control input-lg" placeholder="Your Short Description">

                </div>

               <div class="col-md-3">

                    <input type="text" class="form-control input-lg" placeholder="Your Email Address">
               </div>

               <div class="col-md-3">

                    <button type="submit" class="form-control input-lg">Submit</button>
               </div>
            </form>
    </div>
</div>

Which is creating a consistent structure of 4 horizontal input elements up to a certain point (my goal). However, at a screen size where these elements are horizontal, I see space between them. I've checked to see what's the issue and it seems to be the padding that col-md-3 creates (correct me if I'm wrong). How can I remove (or minimize to a lower size) the distance between each of the 4 controls I have?

Here's a link of the issue (notice the horizontal space): Link

anemaria20
  • 1,646
  • 2
  • 17
  • 36

1 Answers1

0

Simple add any class and assign CSS as:

.my-div{
 padding-left:0;
padding-right:0;
}

updated changes:

http://www.bootply.com/IZ53ewvxlj

Nitesh
  • 1,490
  • 1
  • 12
  • 20