Using Bootstrap 4 to add icons to a card header

Having trouble positioning an icon to the right of a card header? Check out my code below:

.btn {
  display: inline-block;
}

.fa-pen {
  float: right;
  display: inline-block;
  font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
        <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Any idea why the icon is showing up in the top right corner of my <h2> instead of staying on the same line as my button?

htmlcssbootstrap-4

Answer №1

Another way to achieve this with Flexbox is:

h2.mb-0 {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

If you haven't already, check out this example: https://codepen.io/iamponsiva/pen/mYpWVB

Answer №2

When dealing with 2 inline elements, consider using text-align-last instead of float:

.card-header#headingOne h2.mb-0 {
  text-align-last:justify
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last

The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.

Since there is only a single line, it will automatically be considered the last one.

Check out the demo below:, run the snippet 

.card-header#headingOne h2.mb-0 {
  text-align-last: justify
}

.fa-pen {
  font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
...
...
...
...
</div>

You can also achieve the same result using flex:

.card-header#headingOne h2.mb-0 {
  display:flex;
  justify-content:space-between;
}

Check out the demo below:, run the snippet 

.card-header#headingOne h2.mb-0 {
  display:flex;
  justify-content:space-between;
}

.fa-pen {
  font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script<>;
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script<>;
...
...
...
...
</div>

Answer №3

.btn {
  display: inline-block;
}
h2{
  display:flex;
  align-items:center;
  
}
.fa-pen {
  float: right;
  display: inline-block;
  font-size: 0.75rem;
}
a{
  overflow:hidden;
  margin-left: auto;
  
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1P" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
        <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla euismod sem, et venenatis urna pellentesque at. Nunc ac bibendum nisl. Maecenas non quam metus. Proin elementum eros eget condimentum tincidunt. Sed a nisi nec risus dignissim pharetra.
      </div>
    </div>
  </div>
</div>

Answer №4

For an improved layout, consider implementing the following CSS:

.userChange{
  float: right;
  margin-top:15px
 }

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

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

javascripthtmlcssmootoolssticky

Strange behavior of focus()

My objective is to launch a popup containing an input field and automatically bring focus to that input. I have attempted using $('#input').focus(), $('#input').first().focus(), and $('#input')[0].focus(), but unfortunately, ...

javascriptjqueryhtmlsetfocusautofocus

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the righ ...

htmlcssresponsive-designfluid-layout

Converting HTML documents into spreadsheet files

In a recent project with an NGO, I was tasked with creating a form interface and saving the submitted values to an excel sheet. My current approach involves using html and php to build the form and then converting it to an excel spreadsheet. I'm curio ...

phphtmlexcel

Understanding iterative processes in EJS

I've got an array with some HTML content stored in it like so. const articleArray=['<p>first text</p>\r\n','<p>second text></p>\r\n','<p>third text</p>\r&bso ...

htmlnode.jsexpressejsbackend

Visualization of XML Datamarkup

I am facing an issue with a function that generates XML from a source. Everything works perfectly except for when certain fields are too long, causing the table to stretch and mess up the website formatting. Is there a way to automatically insert line brea ...

phphtmlxml

When a radio button is chosen, multiple text fields must be completed in order to validate the form

I am working with a set of 3 radio buttons. If the last option, labeled "In Home," is chosen, then all 4 of the text fields must be filled in for the form to validate. While I have found information on how to achieve this with checkboxes or a single text f ...

javascripthtmlvalidationradio-grouprequired-field

What are the style attributes that can be edited in each ant design component?

My goal is to customize an ant design card by adding a border only on the left and right sides of the card. The bordered attribute in the card component seems to either remove the entire border or display it on all sides. I am looking for a way to specif ...

cssreactjsweb-componentantd

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

htmlcss

Exploring the possibilities of altering CSS attributes using a button in AngularJS

Is there a way to dynamically change the background image of a website with the click of a button? I'm looking to update the background image attribute in the body tag using CSS and AngularJS. CSS: body { background-color: #00471c; background-im ...

htmlcssangularjsbackground-image

Using attribute value for CSS background-image styling is a handy technique to

In my current situation, the design calls for the use of two different images as background images - one for desktop and another for mobile. These images are uploaded through a CMS, allowing me to retrieve the URLs for both using PHP. Is there a way to pa ...

phphtmlcssattributes

Centering content vertically in CSS

I am facing an issue with aligning buttons vertically inside a div. The number of buttons may vary, but I want them to be aligned vertically in a single column. Using "vertical-align: middle" does not seem to work. How can I achieve this? The height of th ...

csshtmlvertical-alignment

Adjusting Size Dynamically for Tooltips Based on Content Length

In my angular app using ng-bootstrap v4.2.1 on an older codebase, I have successfully created a tooltip with some very long sentences as content. I am trying to make the tooltip 800px wide, but when I set the width, only the first few words fill the space. ...

htmlcssangularng-bootstrap

The truncation of zero values in JSON data is a common issue experienced with

Using jQuery AJAX, I am fetching a JSON string and presenting it on an XHTML page. {"productID":"T1","averageBalance":147765035.20,"accountBalance":147713417.00} The jQuery code snippet is as follows: $.ajax({ type : "GET", ...

htmljsonjquery

What is the best way to change the font size in HTML?

https://i.sstatic.net/IjLvn.png After carefully analyzing the image provided, I encountered an issue while attempting to incorporate the code display:block. However, no changes were reflected. Can you identify what may be causing this discrepancy in my te ...

htmlcss

What is the reason for my HTML elements inheriting the opacity of their parent elements?

After inserting an image tag into my HTML document, I noticed that it was inheriting the opacity from the parent div element. Despite multiple attempts to adjust this, I have been unsuccessful. Here is an example: <div style="opacity: 0.7"> <img ...

htmlcss

Ways to activate a button action with jQuery even when it is disabled and clicked

Thank you for the responses. To clarify my goal, I want the form button to submit all select field responses for processing through php on the next page. If a user clicks the submit button before selecting an option in each field, it should display "whoa d ...

javascriptjqueryhtmlajaxvalidation

The functionality of Draggable and Resizable DIV elements is not functional

I am attempting to incorporate draggable and resizable DIV elements simultaneously using the following resources: http://jqueryui.com/draggable/ http://jqueryui.com/resizable/ It works well when I only use one DIV. I am able to move and resize the DIV. H ...

jqueryhtmlcss

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

javascripthtmlarraysmark.js

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript