How can I place an image next to a text in CSS using Bootstrap 4?

Question

I would like to create a box allowing me to have the profile photo of a user followed by his nickname on the right.

So for that, I proceeded in several ways knowing that I am using Bootstrap 4 :

• I first tried to use the columns, but it didn't work.
• I then looked for a solution on the internet, I found some answers from some users, but it didn't seem to be the solution for me. ( This one in particular. )

So I tweaked it a bit further, trying things like flexbox utilities, but I certainly must be doing it wrong.

I thought afterwards that it wasn't that bad, and that I was just going to ask some of you for help, being pretty sure I would find the solution here.

Let me explain myself by showing you this example:

Here is my code (I'm not organized, sorry):

 :root { --nsfr-pfp-border-radius: none; }.wrapper-fluid { padding: 8em; }.nsfr-pfp { margin-right: auto; margin-left: auto; max-height: none; max-width: 100%; border-radius: var(--nsfr-pfp-border-radius); }.nsfr-pfp-wrap { width: 250px; height: 250px; cursor: pointer; border-radius: 50%; background-color: transparent; overflow: hidden; float:left; }.wrap { clear: both; background-color: var(--wrap); border-radius: 10px; padding: 2em 3.4em; }.username { display: inline-block; font-size: 50px; color: var(--body-color); }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div class="wrapper-fluid"> <div class="container"> <div class="wrap"> <div class="col-md-6"> <div class="nsfr-pfp-wrap"> <img class="nsfr-pfp" alt="Profile Picture" src="https://www.nosfera.app/build/i/_global/user_default.png"> </div> </div> <div class="col-md-6"> <h1 class="username"> Jesztar </h1> </div> </div> </div> </div>

If a few things are missing, please let me know.

By the way, I'm still new to front-end development, so please be indulgent and forgive my lack of knowledge.

Answer 1

There are just so many ways to do it:

• Code it yourself
• Use .card Bootstrap component like what @Pete said
• Use flexbox utilities from Bootstrap

I will show you Bootstrap card component way:

<div class="card rounded">
    <div class="card-body"> 
        <div class="row no-gutters">
            <div class="col-md-3">
                <img class="img-fluid rounded-circle" alt="Profile Picture"
                        src="https://www.nosfera.app/build/i/_global/user_default.png" />
            </div>
            <div class="col-md-7 ml-md-auto">
                <h5 class="card-title">
                    Username
                </h5>
                <p>
                    Biography, and other details
                </p>
            </div>
        </div>
    </div>
</div>

• .rounded : Bootstrap component class to set the border-radius to the default value
• I use .card-body to give it some paddings. You can also use Spacing utility from Bootstrap too. For example, .p-3 .
• .img-fluid from Bootstrap responsive image component to make the profile image responsive.
• .rounded-circle Bootstrap component again sets the profile image's border-radius to even more rounded
• .ml-md-auto is to set the margin left auto up to md breakpoint. I just like to have a little gap between left and right section.

You see there are many component and utilities classes from Bootstrap you can use if you don't want to code it yourself. I would just highly recommend you read through Bootstrap documentation one time to get yourself familiarize it.

demo: https://jsfiddle.net/davidliang2008/pj6tq135/10/

Answer 2

I figured out to fix it by managing the "row" class that I forgotten in writing my code.