CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Errol Paleracio
Errol Paleracio

Reputation: 634

How do i align right in bootstrap card header

I have a bootstrap 4 card and I want to align the h3 and input-group beside each other.

I've tried adding float-right to the input-group but it didn't work. I also tried make the h3 and input-group inline-block but it still doesn't work. P.S. I used inline style sheet.

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="input-group input-group-sm col-sm-3" style="inline-block">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

Upvotes: 3

Views: 6920

Answers (3)

nazifa rashid
nazifa rashid

Reputation: 1519

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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">
</head>
<body>
  <section class="card-header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <h3 class="card-title" style="inline-block">Product List</h3>
        </div>
        <div class="col-sm-6">
          <div class="input-group input-group-sm" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Simply keep .card-header on the section and wrap the title and .input-group into .row > .col-*-*

Upvotes: 6

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

hope this may help you.

  <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"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

<div class="card-header d-flex align-items-center">
    <h3 class="card-title">Product List</h3>
    <div class="input-group input-group-sm col-sm-3 ml-auto">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

Upvotes: 2

Bhadresh Arya
Bhadresh Arya

Reputation: 811

Simply add a row class before your input-group class. Because You took the col-sm-3 with the input-group and it adds 15px padding to left and right to the element. By adding row class you will add minus margin before your input-group and it will align your input-group with h3.

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="row">
        <div class="input-group input-group-sm col-sm-3" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions