Creating a div container with an image and icon using Bootstrap 4

I'm attempting to create a div page with an icon positioned next to the text and button, but for some reason it's not appearing as intended. I've tried using the Flex documentation with d-flex justify-content-around in the div class, however, it hasn't worked as expected. My framework is Bootstrap 4. Here's what I'm seeing :

The Result:

The Expected Result:

Here's the code :

Home.html

div.page {
  padding: 10px 20px;
  background: #FDFDFD;
  width: 280px;
  height: 180px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 32px;
}

p.page {
  color: #252525;
  margin-left: 20px;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Roboto',sans-serif;
}

button.show {
  border-radius: 32px;
  font-weight:bold;
  margin-right: 80px;
  margin-top: 30px;
  border: 3px solid #3379E4;
  text-align:center;
  padding: 5px;
  background: #3379E4;
  width: 50%;
  color: #FDFDFD;
  font-family:'Roboto', sans-serif;
}

i.page {
  font-size: 36px;
  color: #3379E4;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e7e0a100b100d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343372d362d30">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />


<div class="container mt-5">
  <div class="row">
    <div class="col text-center">
      <div class="d-flex">
        <div class="page mr-auto p-2">
          <i class="page fas fa-calculator text-right"></i>
          <p class="page text-left">AK</p>
          <button class="show">Show</button>
        </div>
        <div class="page p-2">
          <i class="page fas fa-laptop text-right"></i>
          <p class="page text-left">TKJ</p>
          <button class="show">Show</button>
        </div>
      </div>
      <img src="https://cdn.pixabay.com/photo/2016/09/18/14/21/swimmer-1678307__340.jpg" class="img-fluid" width="500">
      <div class="d-flex">
        <div class="page mr-auto p-2">
          <i class="page fas fa-store text-right"></i>
          <p class="page text-left">PM</p>
          <button class="show">Show</button>
        </div>
      </div>
    </div>
  </div>
</div>

Appreciate any assistance provided.

htmlcssbootstrap-4

Answer №1

I included custom CSS that is visible at the bottom:

/**** ADDED CSS ****/
.img-fluid {
  margin: -10vh auto;
}
.z-index-1{
  z-index:1;
}

I advise against using the class: .img-fluid as I did, but recommend creating a new class with this negative margin. This is mainly for demonstration purposes.

Next, I applied classes in the following manner:

<div class="col text-center">

<div class="d-flex">

To modify it to look like this:

<div class="col text-center d-flex flex-column">

<div class="d-flex z-index-1">

Update:

Reorganize the structure of your card by dividing it into 2 columns and making some adjustments in the CSS for the icon font-size:

    <div class="page p-2 row">
      <div class="col-8">
        <p class="page text-left">TKJ</p>
        <button class="show">Show</button>
       </div>
      <div class="col-4 d-flex">
       <i class="page fas fa-laptop m-auto"></i>
     </div>
    </div>

DEMO:

div.page {
  padding: 10px 20px;
  background: #FDFDFD;
  width: 280px;
  height: 180px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 32px;
}

p.page {
  color: #252525;
  margin-left: 20px;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Roboto',sans-serif;
}

button.show {
  border-radius: 32px;
  font-weight:bold;
  margin-right: 80px;
  margin-top: 30px;
  border: 3px solid #3379E4;
  text-align:center;
  padding: 5px;
  background: #3379E4;
  width: 100%;
  color: #FDFDFD;
  font-family:'Roboto', sans-serif;
}

i.page {
  font-size: 4em;
  color: #3379E4;
}

/**** ADDED CSS ****/
.img-fluid {
  margin: -10vh auto;
}
.z-index-1{
  z-index:1;
}

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

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

htmlcssfirefoxanimation

Enhancing form class through input-driven database search for updates

I am feeling a bit lost on where to begin with this task. Essentially, what I am aiming for is to have the class of an input change to has-success when the username entered by a user matches a username in a database table named Username. The current code f ...

phpjquerymysqlbootstrap-4

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

htmlcssangular

Ways to slightly tilt an image in Material-UI

I am having trouble displaying my cactus partially above my dialog without it getting cut off when I apply certain styles. Could someone please point out what I might be doing wrong? Here are the styles for the cactus: cactus: { position: 'absolut ...

cssreactjsmaterial-uidialog

Optimizing WebGrid Alignment in MVC3 Using RAZOR

I need to customize the width and alignment of each column in a WEBGRID within MVC 3. Specifically, I have 5 columns and I want to set different width and alignment for each header. Here is my code snippet: @{WebGrid grid = new WebGrid(); if (@Model.V ...

cssasp.net-mvc-3webgridrazor-grid

The integration of Vue JS is not displaying properly in an Electron application

My electron app is loading Vue JS 2 from my local machine, but when I attach my el to an element, it completely empties the element and replaces its contents with a Vue JS comment. What could be causing this issue? index.html <!DOCTYPE html> <htm ...

javascripthtmlvue.jselectron

Is it possible to pass the index variable of a for loop to a different function?

As a current bootcamp student, I have a question about passing the index of a for loop to another function. Specifically, I am trying to fetch data from an API (which provides me with a random cryptocurrency from an array) 4 times and then pass that data ...

javascripthtmlfor-loopindexing

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

javascriptcsshtmlposition

Conceal the div once it reaches the top of the webpage

Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" ...

jqueryhtmlcss

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...

cssangularkendo-grid

Plugin that collapses dropdown menus when the mouse hovers over them, powered by jQuery

My webpage has a simple set of links, and one of them triggers a dropdown menu to appear on mouseover (refer to the image below). The dropdown submenu becomes visible when the link "How fast is it?" is hovered over, and remains fixed in place due to the di ...

javascriptjqueryhtmlcss

What is the best way to display a user's profile picture on my website by pulling it from the database?

I'm currently using this code for my user page, but it only displays their names from the database. userlist.php <?php include "header.php"; include "footer.php"; include "db_conn.php"; ?> <!DOCTYPE html& ...

phphtmlmysql

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?

Currently, I am in the process of developing a website project which incorporates Bootstrap tabs utilizing jQuery. While these tabs are functioning excellently on various pages, I am faced with the challenge of linking specific icons to corresponding tabs ...

javascriptjqueryhtmltwitter-bootstrapsharepoint

WebMatrix does not support PHP tags in .html files

I'm currently delving into the world of web development and I've encountered a bit of an issue. The book I've been using to study utilizes PHP tags within HTML files, but for some reason they're not functioning as expected in my header ...

phphtmlfiletagswebmatrix

Ensure the div has a scrolling feature activated when the content surpasses the height limit

I am attempting to make the middle div #content scroll when its content exceeds the available height (calculated as innerWidth - header height - footer height). However, rather than scrolling, the div has a scrollbar that is unresponsive, and the entire p ...

css

What is the method for automatically starting another .mp4 video once the first one finishes playing?

I am currently trying to replicate the functionality of a television for a project. The idea is to play a .mp4 file, and once it ends, automatically select and play another .mp4 file. It's like mimicking the TV experience where one episode finishes a ...

javascripthtmlvideo

"The issue with the addClass function not properly executing within an if

I am trying to make a feature where the class changes based on my selection. The issue I am facing is that when I change it for the first time, it switches from being classified as "black" to "colored". However, upon changing it back, it remains labeled as ...

jquerycss

The Bootstrap carousel is experiencing compatibility issues with Angular 7 and is currently not functioning properly

I'm currently using the bootstrap multi carousel, and it works perfectly without a loop. However, when I try to implement it dynamically using an ngFor loop, it doesn't function as expected. Instead of sliding with multiple images, it just displa ...

angulartwitter-bootstrapbootstrap-4angular7

swap out the CSS class for my own class dynamically

When I display HTML code like this <div class="btn btn-pagination"> <i class="fa fa-angle-right"></i> </div> and want to replace fa fa-angle-right with myClass when the page loads. I attempted: $(document).ready(function () { ...

javascriptjqueryhtmlcss

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs