How to efficiently structure CSS columns using Div elements within a Bootstrap card

<!-- New Blog Post -->
            <div class="card mb-4">
                <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap">
                <div class="card-body">
                    <h2 class="card-title">Funding For Bulbul</h2>
                    <p class="card-text">Authorities in Bangladesh have issued evacuation orders for around 100,000 people from coastal areas as Cyclone Bulbul approaches the country.

                        The cyclone is expected to hit on Saturday evening with surges as high as 7ft (two meters).</p>
                  <div class="myrow">
                      <div class="col-1my">
                     <a href="#" class="btn btn-primary">Read More &rarr;</a>
                    </div> 
                    <!--Progress Bar-->
                   <div class="col-2my">
                    <div class="container">

                    <div class="progress">
                        <div class="progress-bar"></div>
                      </div>
                    </div>
                </div>
            </div>
            </div>
                <div class="card-footer text-muted">
                    Posted on November 9, 2019 by
                    <a href="https://www.bbc.com/bengali">BBC Bangladesh</a>
                </div>
            </div>

The Related CSS Rules

  .myrow {
 display: flex;
 width: 100%;
  }

  .col-1my {
      width: 40% !important;
  }
.col-2my {
    width: 60% !important;
  }
  * {
      box-sizing: border-box;
  }

Output : https://i.sstatic.net/ASN45.jpg

The buttons need to be more visible and fit the text properly. How can I adjust this?

**Update 1 ** :

Updated CSS :

   .myrow {
 display :flex;
 width : 100%;
  }

  .col-1my {
      width : 40% !important;
  }
.col-2my {
    width : 60% !important;
  }
  * {
      box-sizing: border-box;
  }

The issue was resolved by renaming the columns and adjusting the CSS properties as per the comments. This change helped in fixing the visibility and size of the buttons as intended.

Answer №1

Update your HTML code and eliminate any custom CSS

  <div class="card mb-4">
    <img class="card-img-top" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/948D/production/_109592083_mediaitem109591445.jpg" alt="Card image cap">
    <div class="card-body">
        <h2 class="card-title">Funding For Bulbul</h2>
        <p class="card-text">
            The authorities in Bangladesh have ordered the evacuation of some 100,000 people from coastal areas as Cyclone Bulbul is set to hit the country.

            The storm - which is due to make landfall on Saturday evening local time - is expected to unleash surges as high as 7ft (two metres).
        </p>
        <div class="d-flex align-items-center"><!-- Modifications made HERE -->
            <div class=""><!-- Modifications made HERE -->
                <a href="#" class="btn btn-primary">Read More &rarr;</a>
            </div>
            <!--Progress Bar-->
            <div class="flex-fill"><!-- Modifications made HERE -->
                <div class="container">

                    <div class="progress">
                        <div class="progress-bar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer text-muted">
        Posted on November 9 , 2019 by
        <a href="https://www.bbc.com/bengali">BBC Bangladesh</a>
    </div>
</div>

https://jsfiddle.net/lalji1051/2yzw4Ljv/4/

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

Validating Forms using JQuery

I am currently working on a jQuery AJAX code to validate specific fields in an HTML form before submission. If any errors occur during validation, I want the error message to be displayed in a div with the ID "response." However, the code doesn't seem ...

Is there a way to display list items in rows of three?

I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link Is it possible to use CSS to c ...

Stop automatic page refresh after submitting a jQuery post request

I've tried various solutions, but unfortunately, neither e.preventDefault() nor return false seem to be working for me. When I use prevent default ajax doesn't make post request. Even using $.post doesn't work as expected. Furthermore, addin ...

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

Flexbox presenting a specific alignment issue

I'm facing a challenge using Flexbox to achieve the desired result shown below https://i.sstatic.net/8vJGQ.png When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up. I want this l ...

Trouble arises when attempting to bind a JavaScript event with an innerHTML DOM element

I am currently dealing with a complex issue on how to bind a JavaScript event to an innerHTML DOM element. The scenario involves having a div with an input checkbox inside it, along with some pre-existing JavaScript event bound to that checkbox. Additional ...

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, ...

Generate star icons dynamically within a div using C# and MSSQL data to determine the number of stars

Upon retrieving a rating (which can be more than 5) from the database, I aim to dynamically generate glyphicon stars based on the received value when the page loads. The code snippet below demonstrates how the value is retrieved: int rating_count = DBinte ...

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Where does my layout provide a solution, and what adjustments can be made? I attempted modifying the screen dimensions in the Dw Design page without success. ...

Tips for loading and updating data simultaneously in VUEJS from a single input

Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

Creating a single row with five columns using HTML and CSS

I'm currently working on setting up a layout consisting of 1 row and 5 columns placed side by side. These columns are going to showcase the projects that I intend to feature on my online Portfolio. To achieve this layout, I am utilizing the Bootstrap ...

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

$.ajax({ method:"get", url:"/wall", data:"ajax=1", beforeSend:function(){}, success:function(html){ $("#grid_mason").append(html); //Inserting additional co ...

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

Spotting the Visible Element; Detecting the Element in

Currently, my webpage has a fixed header and I am facing the challenge of dynamically changing the styling of the li elements within the navigation based on the user's scrolling position. To achieve this, I believe the most effective approach would b ...

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

Browse through the options in the dropdown list -Angular 6

I am looking to implement a filtering feature in my Angular app where data can be filtered based on the selected product number from a dropdown menu. The product data is structured in JSON format as shown below. component.ts productlistArray = [{ num ...