Home > Net >  Formatting bootstrap card header
Formatting bootstrap card header

Time:11-11

We are rebuilding our site and part of that is using bootstrap. My question relates to the bootstrap card-header css selector.

<div class="card-header">This is my header text</div>

I'd like to format that header such that I can have the header text left aligned (which it is by default) but to be able to add a link or button ,etc. right-aligned within the header.

<div class="card-header">This is my header text     <a href...>some link</a></div>

where the text is still on the left side of the header but the url is on the extreme right hand side of the header.

I know I could build something with basic html, but I was hoping that someone had already found a way to do it using the bootstrap functionality.

Thanks,

CodePudding user response:

With accessing to CSS style Sheet, You can position it using Flex-box and with giving padding to .card-header selector to do not position URL in the extreme right side

 .card-header{
   display : flex;
   justify-content : space-between;
   align-items : center;
   padding : 20px /*or padding-right : 20px*/
  }
  • Related