Bootstrap 4 - positioning link element to align with heading in card header

I'm currently utilizing Bootstrap 4+ to design a card that features a collapsible card-body, triggered by a link located in the card-header.

<div class="card text-left mb-3 mt-3">
  <div class="card-header p-3">
    <h4>Where should we begin?</h4>
    <a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    Read More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card-body">
    <p>Content goes here</p>
  </div>
</div>
</div>

The anchor tag displaying "Read More" is not aligned vertically inline with the heading element beside it.

Here's how it looks on chrome:

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

Is there a way to align the heading and "Read More" link vertically so they are in line with each other, thus minimizing unnecessary vertical space?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To fix the issue, simply include the d-flex justify-content-between classes along with your card-head class. Hopefully, this solution will work for you. Thank you.

For more information on Bootstrap 4 Flexbox, check out the official documentation

<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">

<div class="card text-left mb-3 mt-3">
  <div class="card-head p-3 d-flex justify-content-between">
    <h4>How do we get started?</h4>
    <a class="float-right" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card card-body">
    <p>Content</p>
  </div>
</div>
</div>

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>

Answer №2

You can implement the d-flex align-items-center feature from Bootstrap 4+ within your card-head section, eliminating the need for float-right. Instead, utilize ml-auto for a cleaner structure like this:

<div class="card text-left mb-3 mt-3">
  <div class="d-flex align-items-center card-head p-3">
    <h4>How to Begin</h4>
    <a class="ml-auto" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    More
    </a>
  </div>
<div class="collapse" id="collapse1">
  <div class="card card-body">
    <p>Content</p>
  </div>
</div>
</div>

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

Unable to drag and drop onto every part of a div element that has undergone a CSS transformation

Having trouble implementing a Drag & Drop feature. The droppable div is styled with CSS transformations, but the draggable div doesn't drop correctly on the right part of the box. If you'd like to take a look at the code and try it out yourself, ...

jqueryhtmlcssdrag-and-droptransform

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

javascriptcssajaxscrollpopup

How can I change :hover to a clickable element instead?

I attempted to create a full-width accordion with the following code: .page { margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; } .content { -webkit- ...

javascriptjqueryhtmlcss

Refining a collection of item elements by examining a string attribute, disregarding letter case differences

I'm working on a code snippet that generates item components from my list of objects (Frivillig). <app-frivillig-item *ngFor="let frivilligEl of frivillige" [frivillig]="frivilligEl"> </app-frivillig-item> Now, I have a new requireme ...

htmllistangulartypescriptpipe

What measures can be taken to stop links from disrupting the style of a Polymer site?

In Polymer, it seems that many styles are inherited from the surrounding document. For example, the code snippet below will display the icon and button with a white foreground color and adjust spacing: <paper-toolbar> <paper-icon-button icon=" ...

csspolymer

Having trouble with images not displaying in IE10 on HTML5 canvas?

I recently delved into learning about html5 and the canvas element, attempting to create a basic webpage that rotates an image clockwise and counterclockwise upon button clicks. Although I managed to get it working, when I tested it on ie10, only the blank ...

htmlinternet-explorercanvasinternet-explorer-10

What is the best way to link various stylesheets to a Rails project?

In my project, I have a main stylesheet called application.css included in the layout file layouts/application.html.erb: <%= stylesheet_link_tag "application" %> However, there is a specific section of the website where I want to use a different st ...

ruby-on-railscss

Struggling to dynamically include an identifier to a div element within a Rails helper function

I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...

htmlcssruby-on-rails

CSS Text ellipsis displays only the beginning of each paragraph

I want to add ellipsis to a text, but it keeps including the first line of all paragraphs. What I actually need is for only the first line of the content to have the ellipsis applied. Here is an example of the content: When using websocket to send message ...

javascripthtmljquerycssbootstrap-5

What is the process for registering a click using a class in jQuery and retrieving the ID of the clicked element?

Currently, I am working on developing a webpage where I need to use jQuery to register a click using the items class and then extract the ID of that particular object. For example: HTML: <div class="exampleclass" id="exampleid1"></div> <d ...

javascriptjqueryhtml

Adjustment of Facebook button positioning in floating bar on Firefox

My floating bar currently has 5 social buttons, but I've noticed that the Facebook button is shifting about 20 pixels to the left. Could this be an issue with the CSS elements? After inspecting the elements, I found that when I remove position: absol ...

htmlcssfacebookfirefoxmozilla

Executing a function upon loading a page triggered by a submitted form

Recently on my index.php page, I implemented a form that posts data into a third-party newsletter system. After the form submission, the page reloads to index.php?mail&. Is there a way to detect when the page is loaded and determine if the form has bee ...

javascriptjqueryhtmlformspost

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Is there a way to remove this annoying double Google search bar?

Looking to replicate the Google home page for a project using HTML and CSS. I'm having trouble with incorporating the highlighted code (as shown in the second picture and identified by bold and italicized text) into my code. When I try to add it, I en ...

htmlcss

Having trouble retrieving the ID of the clicked element in AngularJS?

I have successfully implemented a function in angularjs to retrieve the id of the clicked element. Below is my code snippet html <a href="#faqinner/contactform" class="clearfix" ng-click="getCateId($event)" id="{{option.id}}"> <span class= ...

javascripthtmlangularjs

Compatibility issues arise when trying to use jQuery Mobile in conjunction with jQuery UI

I'm currently developing an HTML5 application that needs to function seamlessly on desktops, tablets, and mobile devices. However, I've encountered a hurdle when it comes to implementing progress bars and dialog boxes. Initially, I was using jQue ...

javascriptjqueryhtml

What is the method for displaying the word '<head>' within a <p> element in HTML code?

My HTML page contains a simple <p> tag. Within this tag, I am attempting to display some text in the following manner: Insert this code snippet into the website header, between <head> and </head>, to activate the functionality notice. ...

html

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Within the scenario below, a parent element is present in the HTML code and the span element with a class of 'child' is nested within the parent element using the createChild function. Subsequently, the content of the child element is modified el ...

javascripthtmldomqueryselector

Assistance requested with Javascript for an HTML dropdown menu

My question involves utilizing two HTML drop down menus. <select> <option value="">Please Select</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option ...

javascripthtml