Achieving vertical alignment in Bootstrap for card header

I'm troubleshooting a card layout on my Bootstrap page

<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">
    <div class="card-header bg-info text-light">
        <span style="vertical-align: middle">Example Python3 script</span>
        <button class="float-right btn-light btn" onclick="copy_function()">Copy</button>
    </div>
    <div class="card-body" style="background: #F0F0F0">
        <pre><code class="python" id="text_to_copy">import urllib.request, json</code></pre>
    </div>
</div>

The style="vertical-align: middle" attribute isn't aligning the text with the button as intended. Any suggestions to properly center the text and button within the card header?

htmlcssbootstrap-4

Answer №1

To center items, you can utilize flexbox (d-flex). It's important to update the button as well because using float right does not work with flexbox. Instead, consider using auto margins for proper alignment.

<div class="container">
    <div class="card">
        <div class="card-header bg-info text-light d-flex align-items-center">
            <span>Sample Python3 code snippet</span>
            <button class="ml-auto btn-light btn" onclick="copy_function()">Copy</button>
        </div>
        <div class="card-body" style="background: #F0F0F0">
            <pre><code class="python" id="text_to_copy">import urllib.request, json</code></pre>
        </div>
    </div>
</div>

Link to example code

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 is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

javascriptcssreactjsmaterial-ui

SVG text tags displaying Russian characters incorrectly

Upon visiting my website, I noticed that the Russian text within the SVG is not displaying correctly in certain browsers. Here is the code snippet causing the issue: <g> <rect id="XMLID_2_" x="409.1" y="102.3" transform="matrix(0.7071 -0.7071 ...

htmlsvgcharacterfont-face

Get rid of the <h1> tag surrounding the Wordpress logo

Currently, I am utilizing an Ultimatum child theme that was not created or selected by me. Upon inspection, I discovered that the logo is enclosed in an <h1> tag. For the sake of SEO, I require a different, more optimized logo as it seems the curre ...

phphtmlwordpress

Retailify - H2O - Elastic

Why is only one column showing up even though I'm using the col-md-6 class? div class="container"> {% for member in section.blocks %} <div class="row"> <div class="col-lg-6 col-md-6"> {% if member.settings.photo %} {{member ...

bootstrap-4shopifyliquid

Mastering AngularJS - Field Population with Blinking Placeholders

I understand that AngularJS fills in fields through their model. HTML is loaded first: <input type="text" data-ng-model="data.myValue" placeholder="example"> The JavaScript code comes next: $scope.data = {}; $scope.data.myValue = 'hello my v ...

htmlangularjs

The app was rejected from the Play Store due to a breach of section 4.4 in the Developer Distribution Agreement

Just got an email notification that my application submission, Chami Browser, has been rejected due to violation of section 4.4 of the Developer Distribution Agreement. The reason for rejection is accessing YouTube videos in violation of their Terms of Se ...

androidhtmlwebviewyoutube

What strategies can I implement to prevent position: absolute from obscuring my content?

I am currently experiencing an issue with my Google Map loading within a tab. The container div has the position set to absolute. Although the map displays correctly, I am encountering a problem where it covers any content I try to place underneath it. My ...

javascriptjqueryhtmlcss

Toggle class with jquery if the checkbox is checked

I am trying to achieve a simple task using jQuery. I have a checkbox inside a box, and I want to toggle a class on the box with a transition when the checkbox is checked. However, my code is not working as expected. Here is what I have: $(document).ready( ...

javascriptjqueryhtmlcsscheckbox

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

For a school project, I am working on creating a sign-in page. Although I have come across this code, it does not appear at the center of the page as intended. Instead, the left side displays to the left while the right side shows up to the right. My goal ...

csstwitter-bootstrapcenter

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

Click on a designated button to choose a specific file on an HTML page

I need to be able to select a specific file by clicking on another button. A helpful solution that utilizes JavaScript to trigger the selection of a hidden file can be found in this answer. You can view the implementation here. In my scenario, I alre ...

javascripthtmljquery

In relation to User Interface: Analyzing target tracking and studying the flow of time

Is there a way to track mouse cursor movements, button clicks, and click times to an external database using only CSS, HTML5, and Javascript? I am curious about the possibility of conducting usability studies in this manner. ...

javascriptcsshtmltrackingusability

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

javascripthtmlcsstwitter-bootstrap

Messing up Bootstrap ES6 JavaScript code leads to the problem of the "Modal redeclared" error

Encountering the issue of "Modal redeclared" when attempting to minify Bootstrap 4 JS code using Grunt. Discovered these are due to ES6 so found the ES6 Uglify for Grunt. Current dependencies include: "bootstrap": "~4.0.0", "grunt": "~1.0.1", "grunt-contr ...

npmgruntjsbootstrap-4es6-modulesgrunt-contrib-uglify

template for login page with google closure UI design

Just starting out with google closure... are there any templates provided by Google for creating a basic user registration/login page? Most of what I've found so far seems to focus on UI manipulation and DOM creation. ...

htmlcssgoogle-closuregoogle-closure-library

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

Can cells be divided in a Material UI table?

Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...

cssreactjsmaterial-ui

A beginner's guide to implementing the GET method with Express.js

Hey there, I have a folder named "vehicles" on my PC and I'm looking to set up a localhost to generate links for each image in that folder. For example: localhost:800/vehicle/ So when I click on the link, it should display the image. However, bein ...

htmlnode.jsexpress

Issues arise with AJAX authentication request

Currently, I'm working on incorporating a basic login form with an AJAX request that forwards the user to a page for querying my database. Depending on the results, the user is then redirected to the main index page or prompted back to the login form. ...

phpjqueryhtmlajax

Tips for employing e.preventDefault within the onChange event handler for a select element

Is there a way to prevent the select tag value from changing using preventDefault? I have successfully prevented input from changing the value with event.preventDefault, but have not been able to do the same for the select tag. Here is an example code sni ...

javascripthtmlselectdom-eventspreventdefault