arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout.

I want the cards to be side by side like this:

https://i.sstatic.net/s6225.png

<div class="card-body p-0 d-flex justify-content-around flex-wrap">
    <div class="col-md-3 ">
        <div class="card card-style1">

            <div class="card-header s-2">
                <h3 class="card-title">Data </h3>
            </div>

            <div class="card-body d-flex justify-content-center" style="overflow-y: auto; list-style-type:none;">
                <table class="data-info-table">
                    <tr data-toggle="tooltip" data-placement="left" title="Data Name">
                        <td><i class="fas fa-user "></i></td>
                        <td><textarea class="form-control asd" id="client" rows="1" type="text" style="resize: none; overflow-y: auto;"></textarea></td>
                    </tr>

                </table>
            </div>
        </div>
    </div>  
</div>
htmlcssbootstrap-4

Answer №1

Directly sourced from Bootstrap Card. I customized it by adding a new parent div with class="row" and col-6 for both cards. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row col-12">
  <div class="card col-6">
    <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <div class="card col-6">
    <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

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

Convert the 'value' attribute in HTML into a clickable link

Is there a way to make the output value of an HTML input field into a clickable link? Right now, it appears as follows: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactD ...

javascriptphphtml

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

css

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Maintain user input within the table following a page refresh

I have been working on developing a table that allows users to edit it. I successfully created a script that adds comments to the table, but unfortunately, these comments disappear when the page is refreshed. I understand that I may need some additional to ...

javascripthtmljsonhtml-tablelocal-storage

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

javascriptjqueryhtml

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

Update the style dynamically in Angular using an ngFor directive and an array of data

Is there a way to dynamically set the width using data from an array in Angular? The usual approach doesn't seem to work. How can I solve this issue? <div *ngFor="let item of products"> <div [style.width.px]="item.size" class="Holiday"&g ...

htmlangulartypescriptarraylist

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

javascripthtmltypescript

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

htmlangulartypescriptfilterangular-material

"Implementing a spinning wheel feature using HTML and JavaScript to dynamically add components

Trying to add a needle on top as a stopper. Previously, a custom-created SVG arrow was used, but now attempting to replace it with a needle.png at the same position. Any suggestions? Various options were tried to add an image in JS, but none of them work ...

javascripthtmljquerycssbootstrap-5

Leveraging django model information within a bootstrap layout

Struggling with integrating Django model data into a Bootstrap 5 collapse function for an expanding list. After taking a long coding break, I'm finding it challenging to make the collapse function work with the data from Django. It works when using a ...

pythondjangobootstrap-4bootstrap-5

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Hello there! I've created a simple HTML file located at that can display your public IP address. If you take a look at the code of the page, you'll notice that it's just plain HTML - nothing fancy! However, I'm aiming for something mo ...

javascriptphphtmlajax

Extracting HTML Data in Point of Interest (POI)

When creating a spreadsheet report using POI, I often come across html content with various tags like <p>, <b/>, &nbsp;, etc. Is there a way to parse these html tags in POI? Are there any functions in POI that can handle html content? Here ...

htmlexcelhtml-parsingexport-to-excel

Use PHP and HTML to create a table that will allow for running specific MySql queries from each cell of the table

I tried my best with the title, but feel free to suggest any edits. Overview: Coming from Android development, I have experience with RecyclerView to display a grid of items from a database. I could easily handle item clicks using onClickListener() and P ...

phphtmlmysql

Navigating Between Web Pages

Hello there! I'm curious to learn how I can establish routing between multiple pages. Specifically, I have an index page and I'd like to navigate to other HTML pages within my views folder. Is it possible to achieve this without relying on the An ...

htmlcssangularjs

javascript close the current browser tab

Can someone please help me with a JavaScript code to close the current window? I have tried the following code but it does not seem to work: <input type="button" class="btn btn-success" style="font-weight: b ...

javascripthtml

What is the best way to ensure the parent element adjusts to fit its floated children, without exceeding the width of the window?

I am attempting to center a group of floating elements, but due to them being displayed in masonry style, I cannot set them as inline. It is clear that a container is necessary, but I have been unable to find information on how to achieve this: Please dis ...

javascriptjqueryhtmlcss

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Fashion for the repetitive elements, activated by events

Looking for ways to style a specific table element that is generated from a repeat.for loop on a <td> tag. <td repeat.for="field of fields" class="${field.fieldKey == 'validTo' ? 'fontweigth: bold;': ''}"> b ...

csstypescriptaurelia