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

There are padding built into various classes.

For example:

A asp.net web forms app:

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />

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

<div class="checkbox-inline">
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>

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.

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

I have not used Bootstrap but I worked on Zurb Foundation  On that I used to add space like this    lt div id  main  class  container  role  main  gt       lt div class  row  gt            lt div class  span5 offset1  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    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    lt div class  span6  style  padding-left 5px   gt       lt h2 gt Welcome lt  h2 gt       lt p gt Hello and welcome to my website  lt  p gt   lt  div gt    It is wrong  What you have to do is add padding to the elements inside    lt div class  span6  gt       lt h2 style  padding-left 5px   gt Welcome lt  h2 gt       lt p  style  padding-left 5px   gt Hello and welcome to my website  lt  p gt   lt  div gt

[twitter-bootstrap] Padding In bootstrap

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2