Using Bootstrap 4 to create a header with an image and background on a card

Exploring the world of Bootstrap cards and trying to create a unique design with colored background and circular image in the header, something like this:

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

However, after using some code examples:

<!-- Background color -->
<div class="card-up aqua-gradient"></div>

<!-- Avatar -->
<div class="avatar mx-auto white">
  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive" alt="woman avatar">
</div>

<!-- Content -->
<div class="card-body">
  <!-- Name -->
  <h4 class="card-title font-weight-bold">Martha Smith</h4>
  <hr>
  <!-- Quotation -->
  <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
    adipisci</p>
</div>

The final output seems to be missing some key elements:

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

Can you achieve this specific card layout in Bootstrap 4? If yes, what tweaks do I need to make to have it working properly? Appreciate any assistance provided.

htmlcssbootstrap-4

Answer №1

Here is a straightforward example that I've prepared for you. Hopefully, this will be beneficial to you.

.aqua-gradient {
  height: 300px;
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(233, 242, 233, 0.9878326330532213) 0%, rgba(0, 212, 255, 1) 51%, rgba(114, 156, 7, 1) 93%);
}

.image {
  margin-top: -150px;
}

.avatar-container {
  width: 90%;
  border: 1px solid #eee;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="avatar-container text-center mx-auto">
  <div class="card-up aqua-gradient"></div>
  <!-- Avatar -->
  <div class="avatar mx-auto white">
    <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive bg-white p-3 image" alt="woman avatar">
  </div>
  <!-- Content -->
  <div class="card-body">
    <!-- Name -->
    <h4 class="card-title font-weight-bold">Martha Smith</h4>
    <hr>
    <!-- Quotation -->
    <p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
    </p>
  </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

Bootstrap's nested grid system allows for intricate and dynamic layouts within

I am looking to design a grid with two columns, where on small and larger screens the width of the right column adjusts itself to accommodate its content, while the left column takes up the remaining space. On extra small screens, the layout changes to two ...

htmlcssgridbootstrap-5

AngularJS form validation process allows developers to verify the information that

How can I implement form validation in Angular for three input boxes? I want all three inputs to be required only when one of them is entered. The continue button should be enabled only if all three inputs are either entered or left blank. You can view th ...

javascripthtmlangularjs

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

javascripthtmlcss

What is the most concise way to align one table row in the middle and another at the top?

Is there a way to align different rows in a table vertically with minimal code? I have a table with 3 rows, and I want the first two rows to be aligned vertically to the top, while the third row should be vertically aligned to the middle. If I try to def ...

htmlcss

refers to the spacing between elements

I currently have 4 nested divs. My goal is to ensure that the margins between each div are equal, maintaining the same distance from the left edge of the parent div to the first nested div, between each pair of nested div, and from the last nested div to t ...

htmlcss

apply CSS to a specific column in a table

I have a table created in the specific layout provided below: <thead> <th></th> <th></th> <th></th> </thead> <tbody> <tr> <td></td> <td></td> <td&g ...

htmlcsssassreact-bootstrap-table

Adding an icon to indicate that the last reading date is over 24 hours old - how to do it!

Within my HTML, I have the following code snippet: {{hsParametersLastRead.readingDate | date:'medium'}} In my controller, I am using this code: $http.get(hsParametersLastReadEndpoint).success(function (hsParametersLastRead) { $ ...

javascripthtmlangularjs

Place a picture within a specified View

I am encountering an issue with my profile image in the header component. The source of the image is coming from the database as a string array. However, when I fetch the user picture from the database, it appears slightly cut off from the top, giving the ...

cssreactjsreact-native

ajaxform is not providing the correct response

There is a form below that logs into Instagram based on the response it receives. If the login is successful (returns "ok"), then it shows success, otherwise it should display an error state. However, in my case, it always returns a null state for some un ...

javascriptphpjqueryhtmlajax

Encountering an issue with the Bootstrap modal popup not functioning properly within a JSP file, implemented alongside the Apache Tiles framework

In my Spring Boot web application, I have incorporated Bootstrap with features like SB Admin and data tables, all of which are functioning correctly. However, I am facing an issue with implementing a Bootstrap modal popup. Below is my JSP code: <%@ ...

javascriptjspbootstrap-modalbootstrap-4apache-tiles

What is the best way to incorporate a transition effect into a flex item with a specified max-width, where the width adjustments are managed by a child div?

The example below demonstrates a situation where the child's width grows with a smooth transition, but the parent's width abruptly changes! What I aim for is to have both the child's width and the parent's width transition smoothly. I ...

javascriptcsscss-animationscss-transitions

How to use jQuery to retrieve the second and third elements from a sorted list

Our task is to modify the URL of the image for the second and third elements within an ordered list using jQuery without converting the list to an unordered list. We are looking for a solution to specifically target and modify the class or image of these t ...

htmljquerycssjquery-selectors

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

javascripthtmlcssbootstrap-5

"Encountering a function error while working with HTML, JavaScript, and

Utilizing Google Script, I have designed this HTML code that sends data to a Google sheet by extracting input from the URL (after /exec?P=tonno&Q=3&C=Cliente+1 where it takes in P,Q,C as inputs): <!DOCTYPE html> <html> <head&g ...

javascripthtmlgoogle-apps-script

Customizing a ControlsFX PopOver in a JavaFX application

I am looking to personalize the appearance of a JavaFX PopOver control. I have a button that triggers the display of the PopOver. Below is a functional example: package custompopover; import javafx.application.Application; import javafx.event.ActionEvent ...

cssjavafxpopover

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

a shadowy see-through veil for division

I'm currently working on adding a dark transparent overlay to the product div whenever someone hovers over the product image. I've successfully created overlays for the entire screen in the past using similar logic, but this time it's behavi ...

jqueryhtmlcss

Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

I'm facing an issue with my data table created using datatables. I need to fix the first two columns, but when I do so, the other two columns overlap them while scrolling horizontally. If I remove the fixed columns, the scrolling works correctly witho ...

javascripthtmljquerycssdatatables

Creating adaptable background images with fullpage.js

I'm currently utilizing fullpage.js for parallax scrolling. I'm wondering if there's a way to make the background images adjust responsively when I resize my window. Check out the documentation here: https://github.com/alvarotrigo/fullPage. ...

javascriptjquerycssfullpage.js

Enhance Fullcalendar by incorporating an HTML tag alongside the "titleformat" option

I am utilizing the jQuery Fullcalendar agenda feature. My main objective is to link an action with each date that appears in the calendar and enable the opening of a separate window for each date. Therefore, I am looking to include a button or a link next ...

jqueryhtmlfullcalendar