CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nick M
Nick M

Reputation: 85

Bootstrap - Placing element B below element A

so confused at the moment I am trying to place a social icon below a h3 tag that is in the same bootstrap row however having a nightmare doing it.

I am trying to create this effect:

enter image description here

However I cant seem to get those icons below the phone number element when they are in the same row, they just sit on the same line.

The logo is also in the same row as the phone number element so if I created another row and placed the icons in that row they appear to far down the page.

Here is an example of my code:

HTML

      <div class="container hidden-sm hidden-xs">
        <div class="row">
        <div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
        <div class="phone-div col-md-6 col-sm-6">
        <h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>
        <img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
        </div>
        </div>
      </div>

CSS

.phone-number {
    color: #fff;
    margin-top: 20px;
    display: inline-block;
    font: 600 2em 'Open Sans', sans-serif;
    float: right;
}

.facebook-icon {
    display: block;
    height: 30px;
    float: right;
}

/* main logo */

.logo-custom {
    height: 75px;
}

@media only screen and (max-width : 1199px) {
    .logo-custom {
    height: 61px;
    }


}

Any tips on what I might be able to do to create this effect?

Thanks, Nick :)

Upvotes: 0

Views: 1093

Answers (2)

jme11
jme11

Reputation: 17374

I think you might be just over-complicating things in your own mind. Forget about Bootstrap for a minute, if you wanted to just make a page that has two elements stacked one on top of the other, then you'd make sure to use block elements (which means that they will take up 100% the width of the container they are in by default).

The thing is that your custom css is actually overriding this normal behavior because you are expressly setting the phone number to be display: inline-block; and making both elements use float:right. Just remove those from your css rules and you'll get your desired effect:

.phone-number {
    color: #fff;
    margin-top: 20px;
    font: 600 2em sans-serif;
}

.facebook-icon {
    display: block;
    height: 30px;
}

If you want the items to align to the right, just add the Bootstrap helper class: text-right to the column div or add text-align: right to your css rules.

EDIT: Just a suggestion

Also, you can streamline your markup. If you want the entire container to be hidden on sm and xs devices, then all you have to have in your col classes is col-md-6. And, if you didn't want your container to be hidden at the xs and sm breakpoints, then all you would need is col-sm-6, because that alone would set the columns to be 50% for ALL viewports that are larger than 767px. Remember, col classes are additive. When you add a col class, it's like saying: "make this column this width from this viewport size and up until I tell you otherwise".

Upvotes: 1

Suganth G
Suganth G

Reputation: 5156

Try this Code:

      <div class="container hidden-sm hidden-xs">
        <div class="row">
        <div class="brand col-md-6 col-sm-6"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
        <div class="phone-div col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12">
                <h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i>01429 7654287</h3>
            </div>
            <div class="col-md-12 col-sm-12">
                <img src="media/img/facebook-icon.png" alt="Facebook" class="facebook-icon">
            </div>
        </div>
        </div>
      </div>

Hope this may useful

Upvotes: 2

Related Questions