CODEWITHSUNDEEP
htmlcsstwitter-bootstrappadding
Jonnyboy
Jonnyboy

Reputation: 25

Uneven padding on row elements in Bootstrap

I have a grid layout consisting of 4 rows in Twitter Bootstrap.

I would like each row to be even in height, with equal padding between the content of each row.

However the padding on the rows are currently unequal.

For example the space at the foot of the li items in 'Technologies' and the hr line is significantly narrower than the space at the foot of 'Education'.

I cannot see in my CSS where I am going wrong, but how can I apply equal padding throughout? Thanks in advance

Here is the link to my website where the issue is.

<div class="container">

    <div id="greeting">
            <p>
                My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
            </p>
    </div>
    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Technologies</h2>
        </div>
        <div class="col-md-4">
            <h2 class="tech-header">Comfortable</h2>
            <ul>
                <li> HTML5</li>
                <li> CSS3</li>
                <li> Bootstrap</li>
                <li> Adobe PhotoShop</li>
            </ul>
        </div>
        <div class="col-md-4">
            <h2 class="tech-header">Finding my feet</h2>
            <ul>
                <li> JavaScript</li>
                <li> JQuery</li>
                <li> PHP</li>
                <li> SQL</li>
            </ul>
        </div>

    </div>
    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Experience</h2>
        </div>

        <div class="col-md-8">
            <h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson &amp; Morgan - March 2007 to August 2015</h3>
            <p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
        </div>
    </div>
            <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Education</h2>
        </div>

        <div class="col-md-8">
        <h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
            <ul>
                <li> BA(Hons) Social Science (2:1)</li>
            </ul>
        </div>
    </div>

    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-12" id="button">
        <a href="Jon Howlett.pdf" class="btn btn-primary btn-lg">View my full CV</a>
        </div>
    </div>

Upvotes: 1

Views: 286

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

Here is your specific code :

HTML :

    <div class="col-md-8">
        <h2>Reader Offer Administrator / Account Manager</h2>
        <br>    <----- REMOVE THIS
        <h3>Thompson &amp; Morgan - March 2007 to August 2015</h3>
        <p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
    </div>

Css:

#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
  top: -60px;     <----- REMOVE THIS
  position: relative;
}

If you remove the <br/> and the top:60px; every thing returns to the normal.

Upvotes: 1

Related Questions