Is there a way to align an image alongside text in CSS with Bootstrap 4?

I am working on creating a box that displays the profile photo of a user along with their nickname on the right side. To achieve this, I have attempted various approaches while utilizing Bootstrap 4:

  • My initial attempt involved using columns, but it did not yield the desired result.
  • After consulting online resources and suggestions from other users, I still could not find a suitable solution. (Refer to this specific answer for more information.)

Subsequently, I experimented with flexbox utilities, but it appears that I may be implementing them incorrectly.

Realizing my struggles, I decided to seek help from the knowledgeable community here in hopes of finding a resolution. To better illustrate my issue, take a look at this example: https://i.sstatic.net/XcSgQ.png

Below is the code snippet that I have been working on (apologies for the lack of organization):

: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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050243e263e20">[email protected]</a>/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 there are any missing details or improvements needed, please feel free to provide feedback.

Also, as a novice in front-end development, I appreciate your patience and understanding towards my limited knowledge in this field.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

There are numerous ways to accomplish this:

  • Write the code yourself
  • Utilize the .card Bootstrap component as suggested by @Pete
  • Use flexbox utilities provided by Bootstrap

Let me demonstrate how to implement it using the Bootstrap card component:

<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>

https://i.sstatic.net/k2BUQ.png

  • .rounded: Bootstrap component class used to set the border-radius to default value
  • I applied .card-body for padding. You can also utilize Spacing utility from Bootstrap such as .p-3.
  • .img-fluid from Bootstrap responsive image component ensures profile image responsiveness.
  • .rounded-circle sets the border-radius of profile image to rounder shape
  • .ml-md-auto auto margin left up to md breakpoint for some gap between sections.

There is a wide range of component and utility classes available in Bootstrap that you can leverage without custom coding. I recommend going through Bootstrap documentation once to familiarize yourself with them.

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

Answer №2

I was able to resolve the issue by making adjustments to the "row" class, which I accidentally omitted when writing my code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Launch in a new window using JavaScript

Check out my interactive map here. Currently, when I click on different sections of the map, the target page opens in the same window. However, I would like it to open in a new window instead. <iframe src="http://bluewingholidays.com/map/map.html ...

javascriptjqueryhtml

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

javascripthtmlangularjsforms

Utilizing DIV elements within table cells

Within this particular table, it is not only cell B that contains both a heading and content, but cells A and C as well. My effort to establish the heading and content using DIV elements has been somewhat successful. While I have achieved the desired font ...

csshtml

What could be causing the issue where only the latest data is being shown

When I use ajax to retrieve data from my database, the console.log displays all the results correctly, but in my HTML, only the last result is shown. What could be causing this issue? Any help would be appreciated! Thanks! Please keep your response simple ...

javascriptphphtmlajax

Is there a way to move my (bootstrap) elements to the bottom of the columns without using position absolute?

I'm currently working on 3 columns with icons at the bottom, as seen on the bottom of this website: I'm trying to align the icons directly to the bottom of each grey box without relying on position absolute which is what I'm currently using ...

csstwitter-bootstrapbootstrap-4position

Link aligned to the right

Recently, I added some menu links in the blue area on . However, I am now looking to add a right aligned link while keeping the others left aligned. My attempt using [method] didn't work. Any suggestions on how I can achieve this? ...

htmlcsshyperlinkalignment

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

Executing SendKeys on a div element with the attribute coleditable="true" in Selenium and C#

I am facing a challenge with an element that I am unable to input text into. <div class="floatstart gridcell grideditablefield" colname="Items" coltype="string" coleditable="true" val="" style="widt ...

c#htmlseleniumselenium-webdriversendkeys

The DIV with looping functionality is not maintaining the table structure from the previous view

I have a table with a lot of ordering details. However, when I try to add a product from the admin page, the original table structure works fine. But as soon as jQuery adds an extra DIV to expand the table, I encounter issues. Can anyone suggest a jQuery m ...

phpjqueryhtml

Seeking guidance on resolving issues with this div table

After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...

htmlcsscss-tables

What is the process for connecting personalized toggle controls to a checkbox input field?

I have created a custom slide toggle control to enhance the functionality of my checkboxes in the app. You can check out the controls by following this link: http://codepen.io/spstratis/pen/fJvoH Currently, I am looking for a way to connect these switche ...

javascriptjqueryhtml

CSS: Preserve HTML elements and only conceal the text within an <a> tag

Inside an "a" element, there's an image followed by text as a link. I'm looking to only hide the text of the link without affecting the display of the image. <a href="https://www.example.com/page"> <img src=" ...

htmlcss

Saving Pictures in Database Without Using jQuery

Hey there fellow developers, I'm currently immersed in a web project that involves reconstructing a social media platform similar to snapchat. To capture images, I am utilizing my webcam with JavaScript and saving the image data to a variable named i ...

javascriptphphtmlajax

utilizing the entire string rather than just a portion

I was attempting to create a JavaScript jQuery program that vocalizes numbers based on some previously saved data. However, I encountered an issue where only the last number in the sequence was being played (the final character in the string). Below is t ...

javascriptjqueryhtml

A step-by-step guide on changing the class of a focused contenteditable element with a button click using jQuery

I need assistance changing the class of an element within a contenteditable div. Here is my current code: <button>swap class</button> <div contenteditable="true"> <h1 class="line-height-1">Your Headline Here</h1> </di ...

javascriptjqueryhtmlcontenteditableclassname

Bootstrap 4 opts for a different approach by not incorporating a hamburger menu and avoiding the collapse of the

When utilizing this HTML code: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>app</title> <meta name="description" content="to ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Adjust the Placement of Images in Relation to Mouse Movements

Is there a way to creatively animate the positions of images or background images based on mouse movement? Let's take Github, for instance: https://github.com/thispagedoesntexist The 404 page on Github is truly impressive. I aim to captivate my use ...

javascriptcsscss-transitions

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss

What is the best way to horizontally align and center the navigation menu?

I've been struggling to center and align the navigation links inside this div horizontally. I attempted a few methods, but none seem to work. I managed to fix the previous issue with #centermenu, but unfortunately it still isn't functioning as e ...

css

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox