Ensure that there is equal spacing between each element in the bootstrap row, with alignment on both the left and right sides

How can I make the three divs stretch across the full width of the parent div with even spacing between them? See reference image below:

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

<div class="media-body">
    <h2 class="account-heading"> {{ userprofile.user.username }}</h2>
    <p class="text-secondary">{{ userprofile.bio|render_tags_and_links }}</p>
    <div class="row">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary ">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Posts: 0
        </div>
        <div class="col">
            Followers: 0
        </div>
        <div class="col">
            Following: 0
        </div>
    </div>
</div>
htmlcss

Answer №1

Here is a suggestion for your code:

<div class="media-body">
    <h2 class="account-heading"> {{ userprofile.user.username }}</h2>
    <p class="text-secondary">{{ userprofile.bio|render_tags_and_links }}</p>
    <div class="row content-between">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary ">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>
    <div class="row content-between">
        <div class="col">
            Posts: 0
        </div>
        <div class="col">
            Followers: 0
        </div>
        <div class="col">
            Following: 0
        </div>
    </div>
</div>

Css Code:

.content-between{
    display:flex;
    justify-content:space-evenly;
}

I trust this will be of assistance to you.

Answer №2

Ensure you don't have to develop a custom CSS property. Bootstrap4 already provides classes for that.

Please utilize d-flex justify-content-end. For more information, visit https://getbootstrap.com/docs/4.3/utilities/flex/

Let me know if you need further clarification.

I trust this will be beneficial for you. :)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
 <div class="media-body">
    <h2 class="account-heading"> {{ userprofile.user.username }}</h2>
    <p class="text-secondary">{{ userprofile.bio|render_tags_and_links }}</p>
    <div class="row">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary " style="display:flex; justify-content:flex-end">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Posts: 0
        </div>
        <div class="col">
            Followers: 0
        </div>
        <div class="col d-flex justify-content-end">
            Following: 0
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21514e515144530f4b5261100f10170f11">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>

Answer №3

To implement this design, utilize flexbox.

In your .css file:

.flex-container {
 display: flex;
 justify-content: space-between;
}
.col {
 width: 100%;
}

For the HTML structure:

<div class="row flex-container">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary ">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>

If you wish to align the bottom row (Posts, Followers, Following) with the divs above them, simply place them in the same row and apply the same CSS styles.

Answer №4

enter code here


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
 <div class="media-body">
    <h2 class="account-heading"> {{ userprofile.user.username }}</h2>
    <p class="text-secondary">{{ userprofile.bio|render_tags_and_links }}</p>
    <div class="row">
        <div class="col">
            <i class="fas fa-map-marker-alt icon-position"></i>
            <p class="text-secondary">{{ userprofile.city }}</p>
        </div>
        <div class="col">
            <i class="fas fa-link icon-position"></i>
            <p class="text-secondary">{{ userprofile.website|render_tags_and_links }}</p>
        </div>
        <div class="col">
            <div>
                <i class="fas fa-calendar-alt icon-position"></i>
                <p class="text-secondary " style="display:flex; justify-content:flex-end">{{ userprofile.user.date_joined|date:"F Y" }}</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            Posts: 0
        </div>
        <div class="col">
            Followers: 0
        </div>
        <div class="col" style="display:flex; justify-content:flex-end">
            Following: 0
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2c332c2c392e72362f1c6d726d6a726c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>

I made a recent adjustment by including the line 'style="display:flex; justify-content:flex-end"

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

Issue with displaying checkboxes in the dataTable table

I am currently working with dataTables and encountering difficulties displaying checkboxes on my tables. Below is the code that I have: <table id="employeeList" class="table table-sm table-bordered table-hover" cellspacing="0" width="200%"> &l ...

javascripthtmlbootstrap-4

Trigger a div to transform upon hover among multiple divs sharing the same class

I have encountered an issue with multiple divs having the same class. I've written a JavaScript code to adjust certain CSS properties on hover, but the problem is that when I hover over one box, all others with the same id and class are also affected. ...

javascripthtmlcss

Styling tooltips using only css - Dealing with overflow issues

What is the best way to effectively showcase these tooltips? When using overflow visible, the issue is resolved, but it causes other elements to spill out of the div. How can this be addressed? HTML: <div id="test"> <a title='Sample tooltip& ...

htmlcss

Accessing a distinct element of e.parameter

I've implemented a Google App Script on my website that automatically writes form data to a spreadsheet upon submission. With multiple forms on the site, I want all their data to go to the same Spreadsheet but different 'Sheets' (tabs at th ...

javascripthtmljsongoogle-apps-scriptxmlhttprequest

The main div on my website appears completely chaotic when viewed in IE versions 7 and 8

On my website, the main div appears floated left on some pages and right on others. In certain pages, it seems to be scattered all over in IE 7 and 8 - I didn't even bother checking in IE6. However, oddly enough, it displays perfectly in IE 6. I need ...

css

Apache web server delivering images within HTML pages

Today at work, I encountered a problem where some of my images were not displaying properly in the img elements. The file paths were correct, and the requests were returning 200, but the images themselves were not showing up. When I tried to open the imag ...

phphtmlimageapache

Incorporating external content into your website: A guide

Currently, I am in the process of developing a website for personal use (without any intention of making profit). The vision for this website is to serve as a comprehensive "directory" featuring various posts sourced from different websites - similar to a ...

htmlwordpressiframeblogs

Adding bootstrap.css causing unidentified CSS classes to appear

On one of my pages, I have imported CSS using the following code: <style type="text/css"> @import url('css/common.css'); </style> While working with a PDF generation function, I used alert debugging to examine the styles b ...

css

Modifying the href in Django according to the current page URL: a step-by-step guide

Like the title suggests, I'm curious about the proper way to dynamically change a link's href based on the current URL that the user is visiting. I attempted a solution, but it proved unsuccessful. {% if url == '' %} href='/cooki ...

pythonhtmldjango

Utilizing static HTML, CSS, and JavaScript for secure backend administrative control

Seeking a solution for my static html, CSS, and JS website which includes some Jquery elements. I want to implement a user-friendly backend system that allows non-developer admins to log in, easily edit sections or change images with their own preferences. ...

phphtmlcssdynamicadmin

Text included in the body of an email sent through Outlook

Whenever I click on a specific button, it opens Outlook with the provided details. Additionally, there is a TEXTAREA element containing certain texts. Is there a way to display this text in the body of my Outlook email? Below is the sample code - & ...

javascripthtmloutlook

I am attempting to link a child object literal with a parent object literal

In a practical sense, I believe I can provide a clearer description of the problem I am encountering. What I am trying to achieve is linking a child entity to its parent. In my current scenario, I have two models: owner and property. An owner can have mult ...

javascripthtmlruby-on-rails

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

React state update not triggering a component re-render

I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...

javascripthtmlcssreactjsstate

Is the property in Angular not being initialized within the constructor?

Currently, I am implementing the Google Maps API in my latest project and encountered an undefined error within my code: export class AppComponent { startLocation: string; endLocation: string; maneuvers: any[]; constructor(private mapQuestService: ...

htmlangular

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

csstwitter-bootstraptwitter-bootstrap-3

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to fi ...

javascripthtmlcssnavigationbarhamburger-menu

What could be causing the inability to retrieve the HTML content of $(window['iframeName'].document.body) when I modify the .attr('src') method?

Why isn't it functioning $(window['iframeName'].document.body).html() ...properly when I update the .attr('src')? When I initially set the src attribute of the iframe to a URL upon creating the page, this code $(window['i ...

javascriptjqueryhtmldomiframe

Creating a lifelike sinusoidal flag animation or flutter effect using SVG格式

I'm attempting to create a lifelike animated svg flag that flutters in the wind. Currently, I am using this simple flag base: <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" viewBox="0 0 200 100" > <p ...

htmlcssanimationsvgsmil

Separate the iframe sessions

I am working with 6 iframes from the same domain but with different URLs and subdirectories. Each iframe sets a cookie with the same name but a different value using the HTML header "set-cookie". To prevent interference between these cookies, I need to fin ...

javascripthtmliframe