Steps to include a wave design at the base of a Bootstrap card

I am attempting to incorporate a wave graphic at the bottom of my Bootstrap card, but unfortunately it is not displaying correctly.

Here is an example image of what I am aiming for:

https://i.sstatic.net/65lzn.png

Below is the current code that I am using:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6865657e797e786b7a4a3e243c2438">[email protected]</a>/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>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To start, create a unique SVG representing your desired wave shape. Numerous free SVG online generators and offline editors are available for this purpose.

For example, I have generated one that closely resembles the wave shape in 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>

Insert the SVG after the .card-body, while keeping it within the .card:

https://i.sstatic.net/1N9jW.png

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010647e667e62">[email protected]</a>/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>

Answer №2

If you're looking to achieve your goal easily, using an SVG wave generator is the best option. I personally recommend this generator. Additionally, adding some extra CSS to your code can help it look more like the desired picture.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d09130b130f">[email protected]</a>/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>

Feel free to generate a new wave or adjust the values in the SVG if you're familiar with it!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The visual appearance of an element generated by Javascript is not currently displayed

I recently completed a project where I used JavaScript to create an element and fetch data from Firebase Firestore database, then appended it to the HTML body. The structure included a div serving as the container box with object.className, an h4 for the t ...

javascripthtmlcssfirebase

bootstrap thumbnail displayed without a border

I have decided to incorporate Bootstrap into my latest project: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS ...

javascripthtmlcss

Removing hover effects from Submit and Reset buttons can be achieved by adjusting the CSS styles

How can I prevent the zoom effect when clicking on the "submit" or "reset" buttons? I want them to maintain a normal appearance. I am required to use hover for this program, except for the last 2 buttons. Please review the code below to see what I have so ...

html

Ways to retrieve the text value of the first column using a button click event in JavaScript

As a beginner in HTML and JavaScript, I have a clear code provided below: HTML <tr> <td>1</td> <td>Info1</td> <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td> & ...

javascripthtml

What is the best way to load ajax content after a specific element in jQuery?

Here is the HTML code I am working with: <div id="mydiv"> </div> I want to use jQuery to load content after my DIV element. This is what I have tried so far: $("#mydiv").load("/path/to/content.html"); However, this code produces the follow ...

javascriptjqueryhtmlajaxload

JavaScript: Form an array of objects with methods embedded directly within

I am in search of a way to create an angular directive that can dynamically generate a view. The requirement is to pass an array of objects defined "inline", each containing a label and a function. When I define an array within a scope and pass its conten ...

javascripthtmlangularjsangularjs-directivejavascript-objects

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

htmlangulartypescript

Angular allows for the creation of a unique webpage layout featuring 6 divs

I am working on a project where I have an image of a car and I need to overlay 6 divs onto the image which can be selected with a mouse click. When a user clicks on one of the divs, it should change color. I've attempted using z-index, but it doesn&ap ...

htmlangular

Angular text input with customizable placeholder text and embedded icon

Hey there, I'm looking to create a unique custom textbox that includes a text placeholder and a help icon that will display useful information in a popover. https://i.sstatic.net/Zh0IK.png When typing into the input, the textbox should have a specif ...

htmlcssangularbootstrap-4

Using JavaScript to ensure that at least one radio button has been selected

Seeking help with fixing my JavaScript form validation for a newbie like me. I suspect the issue lies within my selector (marked as Not Working Comment) but lack the expertise to resolve it. Trying to implement validation for various input types in my form ...

javascripthtmlbootstrap-4

Adjust the color of the whole row in an HTML table by changing the background

I am struggling with styling my dynamic table that pulls data from an API. I have successfully generated the table and inserted rows using JavaScript. However, I am facing styling issues. The colors of my table rows are inconsistent (similar to when using ...

htmlcss

Ensure the uniform width of columns within the Grid component in React

I am facing an issue with a grid list where the columns have different widths due to varying text lengths. Is there a way to make the column widths equal, ignoring the text length? https://i.sstatic.net/SZRxK.png <Container> {elements.map((e, i) ...

javascripthtmlcssreactjsgrid

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

My goal is to replicate the functionality of the iPhone's "Messages" app on a web application using AngularJS or any other JavaScript framework. Each message will be contained in a div element within a larger container. When a new message is added, I ...

javascriptjqueryhtmlangularjs

"Triangle Emblazoned Speech Bubble on a Clear, See-Through Back

I'm currently working on creating a semi-transparent speech bubble with a border. I'm using a ::before element for a larger triangle shape and a ::after element for a smaller triangle shape that sits on top to create the illusion of a border. How ...

htmlcss

Can you explain the techniques involved in creating the transitions and side effects on this website?

I recently came across a video showcasing some incredible websites with impressive effects. One of the standout sites featured was . As a novice in frontend development, I can't help but wonder how these stunning effects are created. ...

javascripthtmlcsseffects

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

Having difficulty altering the color of certain text using JavaScript

Below is a function that I need help with. It's a simple function that changes the text color to green when the eventStatus shows as Active: function() { var diff, status; diff = moment().diff(date, 'days') if (diff > 0) { ...

javascriptjqueryhtmlcssfrontend

What is the best way to create a view that caters to both administrators and regular users?

Currently, I am developing a system in Django which displays different fields and options based on whether the user is an administrator or a Jefe from the table. The administrator can access the panel in Django. class UsuarioCrear(SuccessMessageMixin, Crea ...

htmlpython-3.xdjangopostgresql

Creating a Hover Effect for DIV Elements Using Pure CSS, No JavaScript Needed

Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...

htmlcssanimationhover

CSS 3 Shape: "Reverse Circle" or "Hollow Circle"

Trying to create an inverse circle or cut-out circle in CSS has been a challenging task for me. I stumbled upon this insightful answer provided by ScottS. While Scott's code worked like a charm, I am now aiming to achieve a similar effect on the oppo ...

css