Question 43307 in Html Question posted in
Some basic documentation can be found here.

How to add wave shape at the bottom of Bootstrap card – Html

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:

enter image description here

Here is my current code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>
Tags:

2

Answers


  1. 0

    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/[email protected]/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

    Login or Signup to reply.
  2. 0

    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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search