Padding In bootstrap

Question

Im using bootstrap    lt div id  main  class  container  role  main  gt   lt div class  row  gt       lt div class  span6  gt           lt h2 gt Welcome lt  h2 gt           lt p gt Hello and welcome to my website  lt  p gt       lt  div gt       lt div class  span6  gt          Image Here  TODO       lt  div gt   lt  div gt        Main also has a grey background  The background of the page is white  The problem I am having is that the text is right to the edge of the grey background  I want some padding but when I add it in  the image span goes to the next line   Any ideas where I m going wrong

User · Accepted Answer

I have not used Bootstrap but I worked on Zurb Foundation. On that I used to add space like this.

<div id="main" class="container" role="main">
    <div class="row">

        <div class="span5 offset1">
            <h2>Welcome</h2>
            <p>Hello and welcome to my website.</p>
        </div>
        <div class="span6">
            Image Here (TODO)
        </div>
    </div>

Visit this link: http://getbootstrap.com/2.3.2/scaffolding.html and read the section: Offsetting columns.

I think I know what you are doing wrong. If you are applying padding to the span6 like this:

<div class="span6" style="padding-left:5px;">
    <h2>Welcome</h2>
    <p>Hello and welcome to my website.</p>
</div>

It is wrong. What you have to do is add padding to the elements inside:

<div class="span6">
    <h2 style="padding-left:5px;">Welcome</h2>
    <p  style="padding-left:5px;">Hello and welcome to my website.</p>
</div>

User · Answer

The suggestion from  Dawood is good if that works for you     If you need more fine-tuning than that  one option is to use padding on the text elements  here s an example  http   jsfiddle net panchroma FtBwe   CSS  p  h2       padding-left 10px

User · Answer

There are padding built into various classes   For example   A asp net web forms app      lt asp CheckBox ID  chkShowDeletedServers  runat  server  AutoPostBack  True  Text  Show Deleted    gt    this code above would place the Text of  Show Deleted  too close to the checkbox to what I see at nice to look at   However with bootstrap    lt div class  checkbox-inline  gt       lt asp CheckBox ID  chkShowDeletedServers  runat  server  AutoPostBack  True  Text  Show Deleted    gt   lt  div gt    This created the space  if you don t want the text bold   that class checkbox   Bootstrap is very flexible  so in this case I don t need a hack  but sometimes you need to

[twitter-bootstrap] Padding In bootstrap

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2