CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Jordan Axe
Jordan Axe

Reputation: 3923

How do I align this CSS correctly?

Basically I'm trying to add padding to a profile image and align it as shown below in my bootstrap page.

Here's how it looks as of current:

enter image description here

And here's how I want it to look:

enter image description here

(notice that the username is on top with the profile image and the comment text is below but aligned alongside with the profile image)

Here's the HTML: (I'm kind of new with Bootstrap)

    <div class="row">
        <div class="col-md-12">
            <img src="~/Images/avatar.png" class="profile-picture" />
            <label>Username - 1 month ago</label>
            <p>
                This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
            </p>
        </div>
    </div>

Here's my CSS that adds a bit of padding to the profile image:

.profile-picture
{
    padding-left: 10px;
    padding-right: 10px;
}

Upvotes: 0

Views: 181

Answers (5)

ajc
ajc

Reputation: 1725

You might want to consider giving some css property to the p tag.

http://jsfiddle.net/hXaRG/2/`">Fiddle

Upvotes: 1

2dar
2dar

Reputation: 651

Try this:

.profile-picture{float:left;margin-right:5px;}
.row p {margin-top:0;margin-left:52px;}
.row{width:500px;background:gray;}

this is the result final :

https://docs.google.com/file/d/0B3q2DOPnNwNhM29SYXhEMXhlc3c/edit?usp=sharing

Upvotes: 0

groteworld
groteworld

Reputation: 711

Based on the Bootstrap3 documentation, use of the media class should work.

<div class="row">
    <div class="col-md-12 media">
        <img src="~/Images/avatar.png" class="media-object profile-picture" />

        <div class="media-body>
            <label class="media-heading">Username - 1 month ago</label>
            This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
        </div>
    </div>
</div>

More documentation on this here: http://getbootstrap.com/components/#media

Upvotes: 2

j08691
j08691

Reputation: 207943

Try this CSS:

.row {
    position:relative;
    background: #999;
}
img {
    position:absolute;
    left:0;
    top:0;
}
.col-md-12 {
    padding-left:80px;  
}

jsFiddle example

(Note the background color on .row is only for visualization purposes)

Upvotes: 0

Laxmana
Laxmana

Reputation: 1706

You have to float the image and the content to achieve the desired result. You have to modify a bit the html code like this :

<div class="row">
            <div class="col-md-12">
                <img src="~/Images/avatar.png" class="profile-picture" />
                <div class="comment">
                    <label>Username - 1 month ago</label>
                    <p>
                    This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. This is the text of the comment. 
                    </p>
                </div>
            </div>
        </div>

and the css

.profile-picture, .comment{float:left;}
.comment label {display: block;}

I haven't put the margin's / padding's that you want.

Upvotes: 0

Related Questions