CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jayson H
Jayson H

Reputation: 2048

Align Text In Bootstrap Well Beside FontAwesome Icon

I'm having difficulties aligning my headline and paragraph text in a "well". The "none" you see is a class to remove specific margins and is not relevant to what I'm trying to accomplish.

Here is my code

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <h3>Test</h3>
        <p>text goes here</p>
    </div>
</div>

Here's what it's doing and what I want it to do.

enter image description here

Thanks for your help!

Upvotes: 2

Views: 10945

Answers (2)

Tyler Evans
Tyler Evans

Reputation: 579

I would do this the following way. I like to use nested rows where ever possible to keep things clean.

/** CSS **/
.well h3 {
    margin-top:0px;
}
.fs48 {
    font-size:48px;
}

/** HTML **/
<div class='row'>
    <div class='col-md-4'>
        <div class='well'>
            <div class='row'>
                <div class='col-xs-3 text-center'>
                    <span class='glyphicon glyphicon-user fs48'></span>
                </div>
                <div class='col-xs-9'>
                    <h3>Test</h3>
                    <p>text goes here</p>
                </div>
            </div>
        </div>
    </div>
</div>

See a working example here : http://jsfiddle.net/D2RLR/6779/

You can simply replace the glyph with the font awesome class.

Upvotes: 1

Sachin
Sachin

Reputation: 40970

I would suggest you to make slight change in your html structure and wrap your text content inside the div and set its display as inline-block

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <div class="text">
           <h3>Test</h3>
           <p>text goes here</p>
        </div>
    </div>
</div>

and css for that additional div is 

.text {
    display:inline-block;
}

Js Fiddle Demo

Upvotes: 1

Related Questions