Icon overflowing due to Bootstrap 4 card title

I'm currently working on implementing an expand/collapse feature with a red close 'X' button in a Bootstrap 4 card. I've almost got it working, but when I try to place the red close icon outside the element that controls the expand/collapse functionality, it ends up moving the button to a different row. Any suggestions on how to fix this issue?

I've already experimented with adjusting margin-right and padding-right properties, but haven't been successful. Can anyone provide assistance?

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
      <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example" class="d-block">
          <i class="rotate fa fa-chevron-down "></i>
          good style 
          <i style='color:red' class="fa fa-close pull-right"></i>
      </a>
      
    </h5>
    <div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            card body
        </div>
    </div>
</div>



<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
      <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
          <i class="rotate fa fa-chevron-down "></i>
          uh oh card-title margin looks weird?
          
      </a>
      <i style='color:red' class="fa fa-close pull-right"></i>
      
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            card body
        </div>
    </div>
</div>

https://jsfiddle.net/martinradio/s0ygr35L/8/

htmlcssbootstrap-4

Answer №1

It is unnecessary to use d-block on the a tag with Bootstrap, as Bootstrap will handle its own CSS and adjust the elements responsively. I have successfully removed the d-block class and everything is working fine.

Here is a live demonstration: https://jsfiddle.net/usdj51ga/

.expandable .fa {
  transition: .3s transform ease-in-out;
}

.expandable .collapsed .rotate.fa {
  transform: rotate(180deg);
}
<head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


</head>

<div class="card ml-5 mr-5 mt-5">
  <h5 class="card-header expandable">
    <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example">
      <i class="rotate fa fa-chevron-down "></i> good style
      <i style='color:red' class="fa fa-close pull-right"></i>
    </a>

  </h5>
  <div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
    <div class="card-body">
      card body
    </div>
  </div>
</div>


<div class="card ml-5 mr-5 mt-5">
  <h5 class="card-header expandable">
    <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example1">
      <i class="rotate fa fa-chevron-down "></i> Yes! card-title margin looks Good!

    </a>
    <i style='color:red' class="fa fa-close pull-right"></i>

  </h5>
  <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
    <div class="card-body">
      card body
    </div>
  </div>
</div>

Answer №2

To create a more streamlined design for your expandable div, I incorporated the CSS3 property display:flex.

Feel free to click the link below to view the live demonstration:

Live Demo

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

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...

jqueryhtmlcssipad

What is the best way to position one of my links at the end of a bootstrap navbar?

insert image description here I'm currently working on implementing a Bootstrap navbar and I am trying to align one of the links, specifically the last one, to the right side. Although I have searched through the documentation, I have not been able t ...

htmlbootstrap-4

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

css

Finding a nested div within another div using text that is not tagged with XPath

I need help creating an XPath to select a div with the class "membername" using the parameter "Laura". <div class="label"> <div class="membername"></div> David </div> <div class="label"> < ...

javascripthtmlxmlseleniumxpath

Is there a way to prevent cards in a carousel slide from wrapping onto two lines?

Currently, I am utilizing Bootstrap 5 to develop a website and an accompanying carousel. My objective is to align all the items in the carousel vertically. Unfortunately, I am encountering some difficulties in achieving this layout. Can anyone provide assi ...

htmlcssvisual-studiofrontendbootstrap-5

UI-Select fails to display the already selected value

Does anyone have a solution for binding a UI-Select control to a Class[] list? The filling up part works fine, but I'm having trouble getting the selected item to display. Any suggestions on how to fix this? Below is my ui-select code: <ui-select ...

jqueryhtmlangularjs

Choose and Send pictures through a Form with JavaScript

Currently, I am exploring different methods for allowing users to submit a form with the images they have selected. My idea is to present users with a set of images from which they can choose multiple options. Potential Solution 1: One approach could invo ...

javascriptphpjqueryhtml

How can I redirect a Spotify API request to save data directly to my local filesystem

I am developing a program for personal use that utilizes Spotify's API. My intention is not to make this software public, but rather to access and analyze my own playlist data. However, I am facing an issue with Spotify's authentication process. ...

htmlhttp-redirectspotify

Function for editing a button in an AngularJS single page application

I am a beginner in AngularJS and I'm currently working on a project to create a single page application for tracking expenses. However, I'm facing some challenges with my code. Although I have successfully implemented most of the functions, I am ...

javascripthtmlangularjs

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

javascriptcsshtmlsass

Building a floating video player using React

I recently installed the React-Player module and it is functioning perfectly. However, I am encountering some difficulties in trying to embed the player within an Element so that it appears as a floating player across my application, regardless of the page ...

javascriptcssreactjsreact-player

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

javascriptjqueryhtml

Effectively replicating an HTML action in MVC ASP.NET

I am looking to replicate a basic function in HTML that is currently working for my needs, but now I need to implement the same functionality in MVC ASP.NET. Here is the original HTML code: <HTML> <HEAD> </HEAD> <BODY> ...

c#htmlasp.net-mvchttp-post

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

css

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

c#html.netvisual-studio-2012coded-ui-tests

Excessive content spilling over into the footer area due to an integrated forum feature within

We have integrated a Muut forum into our website, and it is working well when embedded in a coding block within the page's body. However, there is an issue where the sidebar of the forum gains extra features when logged in as an admin. This causes the ...

htmlcssoverflowembedforum

Removing data entry from MySQL database table using PDO

I'm facing an issue with deleting a row from my database. Despite trying various methods like PDO and MySQL, the data is not getting deleted, but it shows as if it has been deleted. Can someone please help me identify what might be wrong with my code? ...

phphtmlmysqlpdo

Utilizing CSS to Implement a Background Image

Here is where I am looking to upload the image. Ideally, I would like to position my image to the left side of the text related to Food and Travel. You can view the image here. .block-title h3 { color: #151515; font-family: 'Montserrat', s ...

htmlcss

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

javascripthtmlreactjsdatepickermaterial-ui

What is the most efficient way to retrieve the operating system's name and version using JavaScript?

I'm in the process of developing an object that will simplify accessing browser and system information by implementing a function. One particular function within this object is responsible for retrieving the operating system name and version, returnin ...

javascripthtmloperating-systemuser-agentnavigator