I am trying to put a button inside the Popovers in Bootstrap. But I did not succeed.
I am using Bootstrap-Popover. I want to have a button inside the popover.
HTML
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="A short description">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="images.png" class="card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt="Title">
</div>
<div class="card-body text-center mt-5 pt-5">
<a href="# class="text-decoration-none text-dark">
<h5 class="card-title">Title</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
JS
<script>
let servicePOP = 'Test link';
$('.servicePOP').popover({
content: servicePOP,
html: true
});
</script>
You need to add sanitize: false option to popover
Related
I am creating this web portfolio for my web design class with Bootstrap 5. I was able to get my elements to respond correctly for desktop, tablet, and mobile device break points except for the "View More" button on lg screen breakpoint; I simply want to place the same style button underneath the "I'm Nate Finn. Graphic Des...." photo in my desktop version without messing up the order of my photos or sending it down below in which it looks like a footer element. (It currently sits above the footer and looks a bit silly).
I know my columns count is messed up and there is some issue with divs but I cannot figure it out without rearranging everything! I have attached screenshots that included the empty space where I want to center the button:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->
You could use flexbox on the column, but a simple div wrapper with some top padding works fine to wrap the button below the image.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="text-end col-lg-7 ps-sm-5 pe-sm-5">
<img class="img-fluid pt-5" src="https://via.placeholder.com/100" alt="Welcome Message">
<img class="img-fluid d-none d-lg-block pt-5 mt-5 ps-sm-2" src="https://via.placeholder.com/100" alt="I'm Nate Finn"></div>
<div class="text-end col-5 order-lg-0 order-md-2 order-2 float-end px-0">
<img class="img-fluid pt-5 py-0 m-0 border-dark" src="https://via.placeholder.com/100" alt="Vector Cartoon of Face and Torso"></div>
<div class="text-center col-7 order-lg-2 d-lg-none order-md-1 order-lg-0 pe-sm-5 ps-sm-5 pt-3">
<img class="img-fluid" src="https://via.placeholder.com/100" alt="I'm Nate Finn">
<div class="mt-3">
<button class="btn btn-outline-dark btn-sm fw-bold border-2">View More</button></div>
</div>
<div class="container-fluid text-center row-cols-1 d-none d-lg-block px-0">
<button class="btn btn-outline-dark btn-lg order-lg-1 fw-bolder border-3">View More</button></div>
</div>
</div>
<!-- removed by community </section> -->
This question already has answers here:
Bootstrap 4 Cards of same height in columns
(7 answers)
Closed 2 years ago.
First, I'm sorry if there is already an answer to this somewhere. If so, just point me in that direction. I've been looking for a while and can't seem to find an answer that works the way I need.
I am trying to get all of the bootstrap cards on my heroku page to be the same size. I had it set with the container surrounding the responsive divs as display flex and justify-content-center and align-items-center. I have also tried align-items-stretch but it still doesn't result in the cards all being the same height. I've also tried using the bootstrap height utility (h-100) on the responsive divs within the row. Also used css min-height but ran into problems as content would overflow the divs when resizing window.
This is what I currently have that ends up with different sized cards based on the content:
<div class='home-container m-5'>
<div class="row d-flex mb-5 justify-content-center align-items-center">
<div class="col-sm-6 col-lg-4">
<a href='./Multi-welders'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Multiprocess Welders</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<a href='./helmets'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Helmets</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4 h-100">
<a href='./gloves'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Gloves</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card m-3 bg-light">
<img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best MIG Welders</h2>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class='card m-3 bg-light'>
<img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best TIG Welders</h2>
</div>
</div>
</div>
<div class='col-sm-6 col-lg-4'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best Professional Welders</h2>
</div>
</div>
</div>
</div>
</div>
You can add the following css class:
.card {
height: 200px
}
This will give all your cards the same height. You can just change the height to whatever you like.
I have a text in bootstrap card and there's a button under it. Everytime I resize the page the balance between the one card with less text and the other one with more text is broken. Basically the button on card 2 is pushed down more because there's more lines of text than in the card 3 and the buttons are balanced with padding.
I tried to fix this with Bootstrap's text-justify but that only makes the text to go to the possible end and the text still overflows to another line. I have tried searching for solution but found out that there's only a styling that allows you to make text dissapear like "Hey I'm..." when it overflows the selected amount of lines.
How can I balance the buttons to all stay inline with each other no matter the number of lines?
Here's my code :
<section id="avaiable">
<div class="container-fluid shorter pt-4 pb-2 bg-white text-justify">
<!--Benefit cards-->
<div class="row">
<!--Student programs card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/student.jpg" alt="student programs" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Student programs</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">Discover more about student programs that help you get in touch with employers.</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--Student programs card-->
<!--Community engagement card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/community.jpg" alt="community engagement" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Community engagement</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">We engage and listen to our community, we value people who want to do their best.</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--End of community engagement card-->
<!--Invention & innovation card-->
<div class="col-md-6 col-lg-4 my-3 mx-auto">
<div class="card">
<img src="images/innovation.jpg" alt="invention and innovation" class="card-img-top border-radius rounded-top rounded-bottom">
<div class="card-body">
<h4 class="card-title font-proximanova-bold">Invention & innovation</h4>
<p class="card-text">
<h5 class="pb-3 color-grey font-proximanova-light">There are no limits to your inventions, got idea for a new project in mind? Share it right away!</h5>
<a href="" class="btn btn-crimson">
<h6 class="pt-2 px-4 button-text-bigger text-white font-proximanova-light">Find out more</h6>
</a>
</div>
</div>
</div>
<!--End of invention & innovation card-->
</div>
<!--End of benefit cards-->
</div>
</section>
The final goal is to make the buttons stay in line with each other.
I have this piece of code:
<div class="container">
<div class="border rounded-lg" style="height:500px;">
<div class="ml-2 mt-2">
<h1 class="display-3">#Model.Name</h1>
<!-- Image and pay box -->
<div class="mt-4 container">
<img src="~/Resources/default.jpg" class="" style="height:300px;" />
<div class="d-inline align-top float-right border rounded-lg" style="height:250px;width:250px;">
#if (!Model.OnSale)
{
<h3 class="mt-2 text-nowrap text-center text-warning">#Model.Price</h3>
}
else
{
<div class="row">
<div class="col-2 text-center">
<div class="text-secondary font-italic" style="text-align:center;"><s>#Model.PriceBeforeDiscount</s></div>
<div class="mt-2 text-nowrap text-warning">#Model.Price</div>
</div>
</div>
}
<button class="btn btn-success text-white text-center font-weight-bold w-100 mt-3">
BUY NOW
</button>
given a model, it looks like
I want to center both price texts (the ones on the right), but for some reason, it will refuse to use "text-center", any ideas on how I can solve this? (the # sign is just from Razor syntax, it's the variables it displays)
The text prices are center aligned in your code but they're being constrained by the column width
col-2 should be col-12_ thus:
#if (!Model.OnSale)
{
<h3 class="mt-2 text-nowrap text-center text-warning">#Model.Price</h3>
}
else
{
<div class="row">
<div class="col-12 text-center">
<div class="text-secondary font-italic"><s>#Model.PriceBeforeDiscount</s></div>
<div class="mt-2 text-nowrap text-warning">#Model.Price</div>
</div>
</div>
}
I can't recreate the code here but have tested it locally and col-12 appears to solve the problem
Have you tried <div class="row d-flex justify-content-center"></div>
This should work
I'm trying to align my text and button inside a card to the bottom right but I can't get them to align properly.
This is my code:
<div class="col-sm-3 text-right my-auto">
<div class="card text-white text-right d-flex">
<img src="images\col_img_2.jpeg" class="card-img" alt="...">
<div class="card-img-overlay justify-items-end d-flex align-items-end">
<h5 class="card-title">Project 2</h5>
Lees verder
</div>
</div>
</div>
</div>
And this is the result:
Anyone know how to fix this?
Thank you for your kindness in advance!
I figured it out. I fixed it by using mt-auto on the 'h5' element!
This pushes the 'h5' element and 'a' element to the bottom of the card.
<div class="col-sm-3 text-right my-auto">
<div class="card text-white text-right d-flex">
<img src="images\col_img_2.jpeg" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-end flex-column">
<h5 class="card-title mt-auto">Project 2</h5>
Lees verder
</div>
</div>
</div>