Incorporating text alongside an image with the help of Bootstrap

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

I'm struggling to find a way to modify every <p> tag. It always appears next to the the name should be here. I want it to be displayed below the name.

<div class="card" style="width: 25rem;">
    <div class="card-body bg-light">
        <h5 class="card-title text-center">The title should be here...</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2">
        <div>
            <a class="fancybox" href="admin/files/Images/ProfilePicture.png">
            <img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
            </a>
        </div>
        <p class="col p-2 m-0">The name should be here...</p>
    </div>
    <div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Here is a suggestion:

<div class="card" style="width: 25rem;">
    <div class="card-body bg-light">
        <h5 class="card-title text-center">Insert your title here...</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2">
        <div>
            <a class="fancybox" href="path/to/image.jpg">
                <img src="path/to/image.jpg" style="width: 100px; height: 100px">
            </a>
        </div>
        <div class="card-body">
            <p class="card-text">Name goes here...</p>
            <p class="card-text">age</p>
            <p class="card-text">address</p>
        </div>

    </div>
</div>

Answer №2

Also, the following code snippet will be effective:

<div class="card" style="width: 25rem;">
    <div class="card-body bg-light">
        <h5 class="card-title text-center">Place the title in this section...</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2">
        <div>
            <a class="fancybox" href="admin/files/Images/ProfilePicture.png">
                <img src="admin/files/Images/ProfilePicture.png" style="width: 100px; height: 100px">
            </a>
        </div>
        <table cellpadding="0" cellspacing="0">
        <tr><td><p class="col p-2 m-0">Insert the name here...</p></td></tr>
        <tr><td><p class="col p-2 m-0">Age</p></td></tr>
        <tr><td><p class="col p-2 m-0">Address</p></td></tr>
        </table>
    </div>
    <div>
    </div>
</div>

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

Conditional statements in jQuery for identifying a specific div based on its id

My current setup involves an HTML table that gets populated based on a mysql query. The table is enclosed within: <div id="punchclock" class="timecard"> I also have a jQuery script in place to calculate the totals of the times entered into this tab ...

javascriptjqueryhtmlmysql

What is the best way to increase the space between table columns in CSS?

I'm struggling to increase the space between the columns in a simple table with two columns. The column-gap property doesn't seem to be working for me. Any suggestions on how I can achieve this? JSFiddle #t td { -webkit-column-g ...

htmlcsscss-tables

inventory items - 6 articles listed in the initial column

I am trying to organize my list into two columns, with the first column containing 6 items. How can I achieve this layout instead of having the content split evenly between the columns? ul { columns: 2; column-count: 2; height: 800p ...

htmlcss

Show Hindi content in Android web browser

I am currently developing an application that requires displaying Hindi text in an HTML format. I need to display an entire HTML page with content in Hindi. Can someone assist me with this? Any help would be greatly appreciated. Here is a snippet of my cod ...

androidhtmlhindi

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...

javascripthtmljsonangulartypescript

The challenge of managing multiple navigation pills with data-toggle in the Bootstrap framework

I'm experiencing an issue on my page where multiple nav elements with the same class and id names are being cloned. The problem arises when using nav-pills and data-toggle, only the first set is reflecting as selected, while the other sets are not. W ...

jquerybootstrap-4

Truncate text on a dynamic button positioned above a fluid container

Looking for a CSS-only solution to manage text within an image-defined box? The challenge is to place a button in the center if the text is shorter than the image, or cut it with ellipsis if longer. Also, the text should not exceed the box width. Any ideas ...

htmlcssjsfiddle

"Addressing the issue of ineffective form validation for empty or whitespace inputs

I've been working on creating a form and everything seems to be going well except for the validation aspect. It doesn't highlight when intentionally left blank or filled with spaces. I have included "required" in the HTML which partially achieves ...

javascripthtml

incorporate a new component in real-time

I need help with dynamically adding components to my container in AngularJS. I have a componentA that functions as a container, and I want to add multiple instances of componentB when a button is pressed. Currently, I can successfully add a single instanc ...

javascripthtmlangularjs

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

javascripthtmljqueryajax

It appears that the query parameters are impacting the speed at which the page loads

I am currently developing a project on this platform. It is using c9.io, an innovative browser-based collaborative programming IDE. The index.php file includes the following script: <?php $path = ltrim($_SERVER['REQUEST_URI'], '/&ap ...

javascriptphphtmlcss

Suggestion for React onmouseover functionality

Currently, I am in the process of learning how to build a website using React and Bootstrap CSS. In my project, I have incorporated a carousel and a separated navigation bar. Below is an example of the code for my carousel: class Home extends React.Compon ...

cssreactjsonmouseover

Expand a div in navigation using JQuery

Check out this code snippet: .container { width: 150px; height: 100px; } .test { color: white; background-color: red; width: 100%; height: 25%; transition: height ease 1s; } .test:hover { height: 100%; } <div class="container"> ...

javascriptjquerycss

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

I am struggling to find the right way to center those images

https://i.sstatic.net/aRkvl.jpg Hello everyone, I'm currently attempting to set up the main content of the homepage resembling the image provided, but I'm encountering some challenges. Every approach I take seems to cause the image to overflow ...

htmlcssflexbox

Creating a navigation menu that uses images to simulate borders instead of using traditional border styling in CSS

My goal is to create a menu with a design like this: | one | two | three | four| Through CSS and borders, it's possible to achieve a similar look by: .myContainer > ul > li{ border-right: 1px solid purple; } .myContainer > ul > li ...

css

Altering the backdrop upon hovering over an element

As a beginner in Javascript and Jquery, I am working on creating an interactive feature where hovering over one element changes the background image in another column. I have managed to write the function, but now I want to add an animation to the image tr ...

javascripthtmljquerycss

Is there a way to prevent the dialog from retaining any modifications I've made within it upon closing?

My issue involves the use of JQuery UI Dialog. I am trying to prevent it from saving any changes made to the value when closing. Essentially, when I open the dialog, make alterations, and then close it, I want it to revert back to its original state when ...

phpjqueryhtmljquery-uiuser-interface

What is the best way to connect added elements together?

I am currently utilizing Plupload to upload files. Due to specific requirements, I need to place FilesAdded "inside" init as demonstrated below. The issue I'm facing is the inability to utilize jQuery.remove() on elements that have been appended usin ...

jqueryhtmlplupload

What could be causing my CSS background image to not display properly?

For some reason, I can't figure out why it's just displaying a blank screen. This is what I'm seeing: https://i.sstatic.net/0gDIK.png Here is the structure of my files: https://i.sstatic.net/GDToF.png The CSS code looks like this: *{ ...

htmlcss