CODEWITHSUNDEEP
htmlcsstwitter-bootstrapwebposition
Chicky Egg
Chicky Egg

Reputation: 153

Positioning Font Awesome icon and a paragraph

I wanna position the icon to be on top of the sentence and both centered within bootstrap column. I tried changing the position and display in css for both the paragraph and icon but it doesnt work. Right now it looks like this enter image description here

I want it to be like this enter image description here

Here's the code 

#home-info {
    width: 500px;
    height: 200px;
    background-color: rgba(0,0,0,0.7);
    top: 550px;
    z-index: 1;
    position: absolute;
    
}

.col-md-3 {
    height: 100px;
    background-color: #1e2c38;
    text-align: center;
    color: white;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

.col-md-4 {
    height: 300px;
    text-align: center;
    background-color: #1b2328;
}

.col-md-3 p {
    position: relative;
    width: 300px;
    text-align: center;
}
 <div class="container-fluid"> <!-- HOME INFO -->
                
                <div class="row">
                    <div class="col-md-3" id="navy2">
                        <div class="content-container">
                            <i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i>
                            <p>Learn more about our recent events and news!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy3">
                        <div class="content-container">
                            <i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
                            <p>Stay up to date! Get the school's calendar here!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy2">
                        <div class="content-container">
                            <i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
                            <p>Like and connect with us via Facebook!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy3">
                        <div class="content-container">
                            <i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
                            <p>Learn more about us through our videos!</p>
                        </div>
                    </div>
                </div> <!-- ROW -->

Thanks!

Upvotes: 0

Views: 2376

Answers (2)

Yoan
Yoan

Reputation: 46

You may use <br> tag to separate the icon and text. And since you are using font-awesome icons, you use text-align: center to center both the icon and the text.

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

You can center it by making the inner p a display:block element and use margin: 0 auto to center it...

.col-md-3 p {
    position: relative;
    width: 300px;
    display: block;
    margin: 0 auto;
}

http://www.codeply.com/go/kFJwok7k0T

However, because you have the 300px set on the .col-md-3 p, the text will get cut-off at smaller widths. It would be better to not set any specific width on the .col-md-3 p so that it's responsive.

Upvotes: 1

Related Questions