如何在Bootstrap网格中的图像旁边放置标题？

Question

I am looking to replicate Apple's iPhone messaging interface. However, I cannot get the name of the person in the inbox to appear next to the initials icon and I cannot get the small grey letters to be underneath the person's name. I have included a screen shot so that you can have a better idea of what I am looking to do!

Here is my current HTML markup code that I have:

<section class="messaging-body">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <div class="messaging-icon">
                    <img class="img-responsive" src="message-name.png">
                </div>
            </div>
        </div>
    </div>
</section>

Current image
Desired image

Please let me know if you have any idea on how to make this work. Thanks!

Answer 1

Is it possible that the width of the initials is to big? Did you try using col-md-2 or col-md-1 for the initials? Also, you can use inline-block in CSS to align the two text boxes with the initials image. I'd wrap the text in one div so that you only have to align this one. From the code you posted, this would be my best guess!

<section class="messaging-body">
    <div class="container">
        <div class="row">
            <div class="col-xs-2 col-md-2">
                <div class="messaging-icon">
                    <img class="img-responsive" src="message-name.png">
                </div>
            </div>
            <div class="col-xs-10 col-md-10">
                <div class="message">
                    <h4>Name of the person</h4>
                    <p>Lorem Ipsum dolor sit amet, dicta paulo no est...</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.message {
    display: inline-block;
}