How to add wave shape at the bottom of Bootstrap card

Question

I'm trying to add a wave graphic to the bottom of my Bootstrap card, but it’s not working correctly.

Hers is an image of what I need:

Here is my current code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="card" style="background: #f0f6ff">
    <div class="card-body">
      <div class="box">
        <div class="row">
          <div class="col-lg-6 align-self-center">
            <div class="heading-title-2 text-left">
              <p>Title Here</p>
              <h3 class="iq-tw-6">Lorem Ipsum is simply dummy text of the </h3>
              <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div>
          </div>
          <div class="col-lg-6 align-self-center r-mt-40">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What specifically isn't working? The background color seems fine when I run the snippet. — tdy, Mar 30 '23 at 05:06
Hello @tdy but bottom background not came, did you see the shade ? actually I don't know how to put the bottom for that background, do you have any idea? — core114, Mar 30 '23 at 05:10
@tdy Did you see the my attached image, card bottom show some waves background, I want to know how to add like this — core114, Mar 30 '23 at 05:20
Ahh ok, I didn’t notice the wave. I edited the question to emphasize that. — tdy, Mar 30 '23 at 05:24
Does this answer your question? [Wavy shape with css](https://stackoverflow.com/questions/17202548/wavy-shape-with-css) — HDP, Mar 30 '23 at 15:00

score 0 · Answer 1 · answered Apr 03 '23 at 06:06

I think the best option is to use svg, you can find some wave generator, to achive your goal easily, i was using this generator. Also I am adding some extra css to your code to look more like the picture.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <div class="container">
    <div class="card" style="background: #f0f6ff">
      <div class="card-body p-0">
        <div class="box">
          <div class="row">
            <div class="col-lg-6 align-self-center p-5">
              <div class="heading-title-2 text-left">
                <p>Title Here</p>
                <h3 class="iq-tw-6">Lorem Ipsum is simply dummy text of the </h3>
                <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
              </div>
            </div>
            <div class="container">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
               <path fill="#0099ff" fill-opacity="1" d="M0,128L48,112C96,96,192,64,288,90.7C384,117,480,203,576,208C672,213,768,139,864,112C960,85,1056,107,1152,106.7C1248,107,1344,85,1392,74.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
             </svg>
           </div>
    </div>
  </div>

You can generate a new wave if you want, or you can play with the values if you are familiar with svg

tdy · Accepted Answer · 2023-04-04T04:47:04.240

First create an SVG of your preferred wave shape. I won't advertise any specific app/service, but there are lots of free SVG online generators and offline editors.

Here I've created one resembling your reference image:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="150 20 1140 200"><path fill="#ecf1fd" fill-opacity="1" d="M0,256L48,218.7C96,181,192,107,288,69.3C384,32,480,32,576,58.7C672,85,768,139,864,170.7C960,203,1056,213,1152,229.3C1248,245,1344,267,1392,277.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

Put the SVG after the .card-body but still inside the .card:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="card" style="background: #f6faff">
    <div class="card-body">
      <div class="box">
        <div class="row">
          <div class="col-lg-6 align-self-center">
            <div class="heading-title-2 text-left">
              <p class="font-weight-bold text-primary">Title Here</p>
              <h3 class="font-weight-bold">Lorem Ipsum is simply dummy text of the</h3>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- /card-body -->

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="150 20 1140 200">
      <path fill="#ecf1fd" fill-opacity="1" d="M0,256L48,218.7C96,181,192,107,288,69.3C384,32,480,32,576,58.7C672,85,768,139,864,170.7C960,203,1056,213,1152,229.3C1248,245,1344,267,1392,277.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>

  </div> <!-- /card -->
</div>

Thank your for your valuable time and answer – core114 Apr 04 '23 at 05:32 — core114, Apr 04 '23 at 05:32

How to add wave shape at the bottom of Bootstrap card

2 Answers2