CODEWITHSUNDEEP
reactjsbootstrap-4jsxreact-bootstrap
TommyK
TommyK

Reputation: 416

React Bootstrap 4 Align Items in Header

I am using react bootstrap v1.0.0-beta.5 which uses bootstrap 4.

I am trying to create a header that aligns text on one side and an ellipsis on the other that will drop down actions when you click it.

I have attemped to use

<FaEllipsisH className="justify-content-end"/>

What should I be doing?

   <Card style={{ width: '22rem' }} className="pCard" border="dark">
     <Card.Header>
       <FaAmazon/> {product.content}
       <FaEllipsisH className="justify-content-end"/>
     </Card.Header>
     <Card.Body>
       <Card.Title> <FaFileInvoice/> <span className="Home orderNo"><a href={`/products/${product.productId}`}>{product.productId}</a></span></Card.Title>
       <Card.Text>Item</Card.Text>
      </Card.Body>
    </Card>

Associated CSS

.Home .pCard {
  font-size: 0.8em;
  margin-bottom: 10px;
  margin-top: 5px;
  display: flex;
}

Upvotes: 0

Views: 14148

Answers (1)

Ross Allen
Ross Allen

Reputation: 44880

Use the justify-content: space-between from flexbox. You can use Bootstrap's flex utility classes:

<Card.Header className="d-flex justify-content-between">

Upvotes: 3

Related Questions