Organize Your Bootstrap/CSS Card Body with Distinct Heading and Paragraph Sections

I am in the process of creating a basic blog website. On this website, each user will have a Profile page with a specific layout:

<div class="card mt-3 d-block">

<img class="rounded-circle card-image-top d-inline ml-2 mt-2 mb-2" src="{{ profile.img.url }}" alt="Profile Picture" width="200" height="200">

<div class="card-body d-inline">
    <div class="d-inline">
        <h1 class="d-inline-block card-title">{{ user.username }}</h1>
    </div>
    <div class="d-inline">
        <p class="card-text d-inline-block">Your bio here...</p>
    </div>
</div>

<div class="card-footer ">
    <a href="{% url 'edit-profile' %}">
        <button class="btn btn-secondary mt-3">Edit Profile Information</button>
    </a>
</div>

The current view is similar to this example: https://i.sstatic.net/YElGe.jpg. I would like to move the paragraph to the next line while keeping it aligned with the image. How can I achieve this using CSS or Bootstrap classes?

Thank you for your assistance! :)

htmlcsstwitter-bootstrap

Answer №1

Instead of using bootstrap, I decided to create my own design with CSS.

HTML code

<div class="parent">

    <div class="up">
        <div class="image">
            <img src="" alt="">
        </div>

        <div class="detail">

            <h1 class="d-inline-block card-title">Lorem, ipsum.</h1>

            <p class="card-text d-inline-block">Lorem ipsum dolor sit, amet 
                consectetur adipisicing elit. Sunt nihil deserunt 
                consequuntur, ut laboriosam esse quo aspernatur non ducimus 
                temporibus? Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit. Porro, fugiat!
           </p>

        </div>
    </div>

    <div class="down">
        <a href="{% url 'edit-profile' %}">
            <button>
                Edit Profile Information
            </button>
        </a>
    </div>


</div>

CSS code

.parent{
    background-color: gray;
    width: 50%;
    height: auto;
    margin: 200px auto;
}
.up{
    display: table;
    width: 100%;
}
.image{
    display: table-cell;
    width: 50%;
    height: 250px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    
    
}
.image img{
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 50%;
    border: none;
}



.detail{
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    text-align: center;
    padding: 20px;
}
.detail p{
    text-align: justify;
    margin-top: 15px;
}

.down{
    padding: 20px;
    text-align: center;
}
button{
    padding: 3px 10px;
    cursor: pointer;
    
}

The design output can be viewed here

Answer №2

<div class="card-body d-flex flex-column">
    <div class="d-inline">
        <h1 class="d-inline-block card-title">{{ user.username }}</h1>
    </div>
    <div class="d-block">
        <p class="card-text d-inline-block">Add your bio here...</p>
    </div>
</div>

Implement flex and flex-column for better layout

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

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons

Exploring the Pathways of a Website's Architecture

Recently, I stumbled upon a website that piqued my interest. I am looking to send POST requests to it and then retrieve the HTML code from subsequent GET requests. Is there a way for me to uncover the organization of these routes? My plan is to perform m ...

htmlpython-3.xroutes

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

htmlcsstwitter-bootstrapbootstrap-4

Update the visibility of an element depending on the current date

I am creating a website for local use on my tablet and I prefer not to use PHP. I have multiple divs that should be shown on different days like this: - div 1 shows today - div 2 shows tomorrow - div 3 shows the day after tomorrow etc... I found some code ...

javascriptphpjqueryhtmlcss

Creating a grid pattern of boxes within a rectangle using CSS

I'm attempting to design a rectangle filled with colorful boxes Here is the code I'm using: <div class="col-md-3" > <div id="myViewport" style="height: 700px; width: 50px; padding: 10px; border: 5px solid gray; margin: 0;"> ...

htmlcss

Turn off jQuery on certain pages while keeping the styling intact?

Hey there, I'm currently in the process of developing a mobile website using jquery. I was wondering if it's possible to disable jQuery on certain pages while still retaining the styles, such as the navigation bar. The reason for wanting to disab ...

jqueryhtmlnavbar

Could this be the most straightforward and versatile method for vertically centering text inside a block element?

Discovering something new in the world of coding is always exciting: HTML: <div>Vertically Centered Text<span></span></div> CSS: div { height: 100px; /* adjust as needed */ } div > span { display: inline-block; v ...

csslayoutxhtmlhtml

Determine if an email address is already present in the database using PHP and MySQL

I am facing an issue with checking if the email is already in the database. Here is what I have attempted so far, and I have marked the code for email check to make it easier to locate: <?php include('config.php'); if(isset ...

phphtml

Angular and Bootstrap Popover: Maintain popover visibility while hovering over the popover container

For days, I've been struggling with a problem that's been driving me crazy. I need to display a popover with links when hovering over a button. The popover should stay open when the mouse is hovering over the button or the popover box. I'm ...

javascriptangularjstwitter-bootstrapbootstrap-popover

Unable to navigate to input field in Ionic app while focusing on input field on mobile device

Default phone feature: When an input is focused on a mobile device, it automatically scrolls to that input. Issue: This functionality is not working in my ionic app due to horizontal scrolling. Consequently, when I tap on an input, it does not scroll to i ...

htmlangularjscssionic-framework

Creating a secured page with Node.js and Express: Password Protection

I am a beginner with node.js/express! Currently, I am working on developing a chat site along with a chat admin site. When I navigate to _____:3000/admin, it prompts me for a password through a form. I am looking for a way to verify if the entered passwor ...

javascripthtmlnode.jsexpress

Issues with integrating React-Bootstrap onto components

Just started working on a new React application and decided to incorporate react-bootstrap. After running npm install react-bootstrap bootstrap, I noticed that the Column, Row, and Button tags were not functioning properly even though the react-bootstrap ...

javascriptreactjstwitter-bootstrapreact-bootstrap

How to lock a column in place using AngularJS

Attempting to adjust the position of a div in AngularJS (1.5) using the MacGyver library (). The id="reportOption" div remains fixed while the id="reports" div scrolls down. However, there is an issue where the id="reports" div shifts left when scrolling a ...

cssangularjs

The height of Bootstrap 4 beta columns causes a conflict with the navigation bar,

Using Bootstrap Beta 4, I've encountered an issue where my nav element is overlapping my column div. What could be the cause of this problem? <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstr ...

cssbootstrap-4

Using jQuery to eliminate the 'disabled' attribute from CSS

After using the .val() method to enter data into a text box, I noticed that when trying to click "add", the button appears disabled. <input class="btn-primary action-submit" type="submit" value="Add" disabled=""> If I manually type in text, the dis ...

javascriptcss

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

Customize the appearance of checkboxInput in R Shiny using CSS

Here is a simple example of checkboxInput in shiny (a snippet from my larger code). I am looking to incorporate a CSS layout for checkboxes similar to the one showcased here. This will be my first attempt at using CSS within a shiny app, so any help with i ...

htmlcssrshiny

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

javascripthtmlangularjs

Discrepancy in CSS rendering in Chrome and Firefox

When viewing in Chrome, the stats display properly within the gray box at the bottom left corner. However, when using Firefox, the stats appear positioned much lower below the box, with the bottom half of them hidden from view. Here is my CSS code being ...

cssgoogle-chromefirefox

Client request: receive a daily update detailing the differences between two databases

Today, a customer requested that I provide daily reports on the changes between two tables in our database. I am currently contemplating the most efficient and intelligent way to fulfill this request. Should I create a SQL procedure? Or perhaps an HTML p ...

htmlsqlreport