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*/
}