Tips for Bridging the Space in a Horizontal Bootstrap Card

I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with:

  <div
          class="card mb-3 card_focus"
          style="max-width: 60rem; height: 100%"
        >
          <div class="row no-gutters">
            <div class="col-md-4">
              <div
                class="card text-white bg-primary mb-3 d-flex"
                style="max-width: 100%; height: 20rem"
              >
                <div class="card-body">
                  <i class="fas fa-file-code"></i>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                  This is a wider card with supporting text below as a natural
                  lead-in to additional content. This content is a little bit
                  longer.
                </p>
                <p class="card-text">
                  <small class="text-muted">Last updated 3 mins ago</small>
                </p>
              </div>
            </div>
          </div>
        </div>

And here's the related CSS code I've been using:

#main_cont div div i {
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: clamp(70px, 6vw, 200px);
}

This is how the layout currently looks:

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

Answer №1

Exploring the world of Froala design blocks can provide valuable insights into basic layout structures. Consider incorporating them into your projects for added creativity!

Illustration

https://i.sstatic.net/4fkND.png

Snippet

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<section class="fdb-block">
  <div class="col-fill-left" style="background-image: url(https://i.imgur.com/3U2Fd7P.jpg);">
  </div>

  <div class="container">
    <div class="row justify-content-end">
      <div class="col-12 col-md-5 text-center">
        <h1>Froala Blocks</h1>
        <p class="lead">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>

        <p class="mt-4"><a href="https://www.froala.com">Learn More <i class="fas fa-angle-right"></i></a></p>
      </div>
    </div>
  </div>
</section>

Answer №2

Make sure to include margin-bottom: 0% !important; in the

class="card text-white bg-primary mb-3 d-flex"
like so:

<html lang="en>
   
   <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
      <title>Bright!</title>
   </head>
   <link rel="stylesheet" href="style.css">
   <body bgcolor='#303030'link=" #ffbd59" vlink=" #ffbd59" alink=" #ffbd59">
      <div
         class="card mb-3 card_focus"
         style="max-width: 60rem; height: 100%"
         >
         <div class="row no-gutters">
            <div class="col-md-4">
               <div
                  class="card text-white bg-primary mb-3 d-flex"
                  style="max-width: 100%; height: 20rem;margin-bottom: 0% !important "
                  >
                  <div class="card-body">
                     <i class="fas fa-file-code"></i>
                  </div>
               </div>
            </div>
            <div class="col-md-8">
               <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                     This is a wider card with supporting text below as a natural
                     lead-in to additional content. This content is a little bit
                     longer.
                  </p>
                  <p class="card-text">
                     <small class="text-muted">Last updated 3 mins ago</small>
                  </p>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

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

What's the Reason Behind the Ineffectiveness of Footer Background Color in HTML CSS3?

Having some trouble setting the background color for my footer to something other than white. I've been able to successfully change the background of other layout elements, but the footer is giving me issues. Check out the code below: <footer> ...

Updating Content in HTML Code Generated by JavaScript

My goal is to change the innerHTML of a div when it's clicked. I have an array of dynamically generated divs, and I want to target the specific table that the user clicks on. I attempted to set the IDs of the tables dynamically in my JavaScript code: ...

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

Automate the process of modifying specific data in tables through Javascript

I've been attempting to replicate the appearance of a stock-exchange board, but I'm encountering difficulties in updating text automatically without interrupting another. My attempts so far: var textPositive = ["2.0%", "1.7%" ...

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

Struggling to eliminate unwanted space with CSS styling

Despite my efforts with Google Chrome and inspecting elements, I've been unable to eliminate an irritating space. I also experimented with Firebug and attempted to modify properties in the header, headercontainer, etc. The screenshot showing the spa ...

Location of Custom HTML Widget in Django-Dashing

I've encountered a dilemma while using the Django-Dashing framework, specifically regarding the placement of my HTML file for a custom widget. I have meticulously configured the code in my dashboard.html file to ensure proper loading. {% extends &apo ...

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The JSFiddle I currently have is not functioning as expected. When the user directly selects the end-date, it does not restrict the start-date in this particular fiddle. It should change once the user directly changes the end-date. The functionality works ...

The search function on my blog is not displaying the blogs that have been filtered

I have encountered an issue with my code as I am unable to get any search results from the search bar. const RecentBlogs = ({recentBlogs}) => { const [query, setQuery] = useState("") const filteredItems = (() => { if(!query) return rec ...

What is the method for choosing a parent element over a child element in CSS?

I am struggling with styling a menu that has a structure like this: <div class="myclass" > <ul> <li> <li> <------- need to style the parent li and not the child li <li> <ul ...

Having trouble getting my JS/CSS code to work for a single image music play/pause button. Any suggestions on how to fix it?

I'm currently working on a project and trying to incorporate a music button into the navigation bar. The goal is for the song to play when clicked, and then pause when clicked again. However, I've encountered some issues with getting it to functi ...

The hover effect on the menu button is not covering the entire button when the screen is resized

It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...

Is hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

Changing the Input Label Color on Hover in Material-UI TextField

I have a custom styled Mui TextField called CustomTextField. It changes the input background color and font color on hover, but I also want to change the label font color when hovered over. Currently, the input background changes from black to white on hov ...

Center Checkboxes in Bootstrap 4 Form Input

I am working with a Bootstrap Form that contains checkboxes. One specific scenario involves a large number of options to choose from. Currently, these options are displayed in a single long list, which can make it difficult for users to read and select the ...