CODEWITHSUNDEEP
htmlcssbootstrap-4
Gábor Erdős
Gábor Erdős

Reputation: 3689

Bootstrap vertical alignment of card-header

I have a card 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" does not work. Is there any way to align the text to the middle with the button?

Upvotes: 1

Views: 2035

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

You would use flexbox (d-flex) align items center. Also, update the button since float right won't work with flexbox. Use auto margins instead..

<div class="container">
    <div class="card">
        <div class="card-header bg-info text-light d-flex align-items-center">
            <span>Example Python3 script</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>

https://www.codeply.com/go/FZ3CrQpLxY

Upvotes: 4

Related Questions