CODEWITHSUNDEEP
htmlcsstwitter-bootstrappaddingtwitter-bootstrap-3
iffy
iffy

Reputation: 729

How do I remove column padding to have full-width inputs in Bootstrap 3?

How do I get rid of padding in Bootstrap 3's columns?

In the following plunkr, I'd like for the button and text input to be touching: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview and for each to fill the entire width of the div. I'd like them to have no left or right padding. Same for the "pull me left" and "me too" divs.

When I override the padding-left in my own CSS, it pulls everything to the left, making the "Jim" and "Hello" div's content off screen.

Any ideas?

Upvotes: 2

Views: 22694

Answers (3)

Anobik
Anobik

Reputation: 4899

Here's the entire code what you wanted :) Please give a try 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {

    /* Remove any padding from the body */
    body {
      padding-top: 0;
    }
  }
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>

Just a div

    <div class="row">
        <div>
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="row">
                            <div class="col-xs-12">Jim</div>
                            <div class="col-xs-6">Hello</div>
                            <div class="col-xs-6">
                                <div class="row">
                                    <div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
                                        <button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
                                    </div>
                                    <div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
                                        <input type="text" class="col-xs-12" style="width:100%;">
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="col-xs-6">pull me left</div>
                    <div class="col-xs-6">me too</div>
                </div>
            </div>
        </div>
    </div>

I have done it for the button and text input :) you can proceed in the same way :)

Upvotes: 0

Peter
Peter

Reputation: 330

You can achieve this by adding a class to the row which removes padding from all immediate div elements with a class name beginning with "col-".

See here: http://plnkr.co/edit/MBkojy?p=preview

Upvotes: 10

user1647020
user1647020

Reputation: 73

You can set all divs to no padding:

div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

For the other two divs, you'll need to give them some named class (in my example 'padLeft') that return the left padding to the divs.

div.padLeft {
    padding-left: 15px;
}

That is the minimally invasive way to do it. If you have more div's where you want padding than not you simply inverse this, using a separate class for divs that you want the padding removed and leave the others to their default.

Upvotes: -2

Related Questions