Twitter Bootstrap Question posted in

Bootstrap Mobile Vertical Spacing – Twitter bootstrap

I’m using Twitter’s Bootstrap to design a website but i’m finding problems to control the vertical spacing of the website on mobile view because the elements are either sticking or too far apart when switched to mobile view.

is there anything that boostrap offers to increase or decrease the spacing, such as col-xx-offset-# for the horizontal gapping?

Or is there any other standard method to control this?

Code Example with inline style:

https://jsfiddle.net/6e513k5o/

<div class="container">
        <div>
            <div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px" class="col-md-offset-2 col-md-3">
                <img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
            </div>
            <div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px;margin-top:100px;margin-left:-3px;" class="col-md-3">
                <div style="text-align:center">
                    <label>
                        Mr. John Doe
                    </label>
                    <br>
                    <p>
                        CEO
                    </p>
                </div>
            </div>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    use <div class="row"> after <div class="container">

    Login or Signup to reply.
  2. 0

    The good thing about bootstrap is that you can customize it as per your need.

    Please add a custom margin for columns. Please find the updated fiddle.

    https://jsfiddle.net/6e513k5o/6/

    HTML

    <div class="container">
  <div class="row">
    <div class="col-md-offset-2  col-md-3 custom-class">
      <img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
    </div>
    <div class="col-md-3 custom-class">
      <div style="text-align:center">
        <label>
          Mr. John Doe
        </label>
        <br>
        <p>
          CEO
        </p>
      </div>
    </div>
  </div>

</div>

    CSS

    .custom-class {
  color: #555;
  border: 3px solid #ed008c;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search