CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anarachnic
Anarachnic

Reputation: 1

Bootstrap div columns not aligning vertically in row

This is my first post, because I'm stuck on the first part of making my first website.

I'm trying to make a navigation bar with five parts:
(Vertical list of 3 items) (Label) (Logo) (Label) (Vertical list of 3 items)
For example,
(Apples, Oranges, Pears) (Fruits) (Logo) (Vegetables) (Broccoli, Celery, Lettuce)

With my code, the two vertical lists aren't aligned with each other, and I can't get any of them to center vertically in the bar.

This is my code:

HTML

<body>
<div class='nav'>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-md-3'>
                <ul class='port-list' class='navbar-left'>
                    <li>Art</li>
                    <li>Design</li>
                    <li>Writing</li>
                </ul>
            </div>

            <div class='col-md-3'>
                <p class='port'>Portfolio</p>
            </div>

            <img>

            <div class='col-md-3'>
                <p class='about'>About</p>
            </div>

            <div class='col-md-3'>
                <ul class='about-list' class='navbar-right'>
                    <li>Biography</li>
                    <li>R&eacute;sum&eacute;</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>


CSS

* {
    list-style: none;
    list-style-type: none;
}

body {
    height: 100%; /* Prevents rubber-band scrolling */
    overflow: hidden; /* Prevents rubber-band scrolling */
}

.nav {
    color: #fff;
    font-family: 'Donegal One', serif;
    background-color: #004d40;
    padding-top: 12px;
    padding-bottom: 8px;
    display: block;
}

.port-list {
    text-align: right;
}

.port {
    text-align: left;
}

.about {
    text-align: right;
}

.about-list {
    text-align: left;
}

This here newbie would appreciate any help. Thanks.

Upvotes: 0

Views: 2859

Answers (2)

Tushar
Tushar

Reputation: 4418

Here is the updated code

HTML

<div class='row newRow'>

Added newRow to row CSS

.newRow {
  width: 100%;
  display: table;
}
.newRow .col-md-3 {
  display: table-cell;
  vertical-align: middle;
  float: none
}

Upvotes: 2

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

You can define line-height for both div as follow:

<div class='col-md-3' style="line-height:58px;">
      <p class='port'>Portfolio</p>
</div>
....
<div class='col-md-3' style="line-height:58px;">
     <p class='about'>About</p>
</div>

Upvotes: 0

Related Questions