Tips for arranging 3 cards in a straight line across the horizontal axis

I'm new to coding and I've recently started using HTML, CSS, and Bootstrap 4. Currently, I'm working on a webpage that includes a navigation bar, 4 cards, and a footer with information. I utilized Bootstrap to create rows and columns, but I'm encountering alignment issues. How can I resolve this situation?


<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
         crossorigin="anonymous">
      <link rel="stylesheet" href="MYCELIUM.CSS">
      <link rel="stylesheet" href="activities.css">
   </head>
   
   <script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>

   <body>
      <div  class="col-md-4 col-sm-6 boxy" class="wrapper">
         
            <div class="pop-up">
                <div class="front">
                  <img class="girlimg" src="girl.jpg" alt="asdasda">
                  <p><h2 class="activname">Guided hiking tours</h2></p>
                  <button  class="activbutt" type="button" name="button">SEE DETAILS</button>
                  <div class="details">
                    <div class="duration">
                      <i class="fas fa-clock">Duration</i>
                    </div>
                    <div class="people">
                        <i class="fas fa-user-friends"></i><br>
                        <p>Max adults:10</p>
                    </div>
                    <div class="kids">
                      <i class="fas fa-child"></i><br>
                      <p>Max children:3</p>

                    </div>

                  </div>

                </div>
            </div>
            <p></p><br>
            <div class="pop-up-2">
              <div class="card-2">
                <img class="girlimg" src="bike.jpg" alt="bikeactiv">
                <p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
                <button class="activbutt1" type="button" name="button1">SEE DETAILS</button>

              </div>
              <div class="details">
                <div class="duration1">
                  <i class="fas fa-clock">Duration</i><br>
                  <p></p>
                  <p> <span class="quarter">QUARTER DAY</span> </p>
                </div>
                <div class="adults">
                    <i class="fas fa-user-friends"></i><br>
                    <p>Max adults:10</p>
                </div>
                <div class="kids1">
                  <i class="fas fa-child"></i><br>
                  <p>Max children:3</p>

                </div>

              </div>




            </div>

            </div>

          <div class="wrapper1">


            <div class="pop-up-3">
                <div class="card-3">
                  <img class="girlimg" src="climbing.jpg" alt="clim">
                  <p> <h2 class="climbing">Climbing</h2> </p>
                  <button class="activbutt1" type="button" name="button">SEE DETAILS</button>

                </div>
                <div class ="duration2">
                    <i class="fas fa-clock">Duration</i><br>
                    <p></p>
                    <p> <span>FULL DAY</span> </p>
                  </div>
                <div class="adults1">
                  <i class="fas fa-user-friends"></i><br>
                  <p>Max adults:10</p>
                </div>
                <div class="kids2">
                  <i class="fas fa-child"></i><br>
                  <p>Max children:3</p>

            </div>

              </div>
              <div class="pop-up-4">
                <div class="card-4">
                  <img class="girlimg" src="canoe.jpg" alt="clim">
                  <p> <h2 class="climbing">Canoe</h2> </p>
                  <button class="activbutt1" type="button" name="button">SEE DETAILS</button>

                </div>
                <div class ="duration2">
                    <i class="fas fa-clock">Duration</i><br>
                    <p></p>
                    <p> <span class="quarter">QUARTER DAY</span> </p>
                  </div>
                <div class="adults1">
                  <i class="fas fa-user-friends"></i><br>
                  <p>Max adults:6</p>
                </div>
                <div class="kids2">
                  <i class="fas fa-child"></i><br>
                  <p>Max children:2</p>

            </div>
          </div>
        </div>
     </body>
   </html>
htmlcssbootstrap-4

Answer №1

To create a row layout, follow this basic structure:

<div class="row">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

You have the flexibility to enhance it further with the following code:

<div class="row">
   <div class="col row mx-0">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
   </div>
   <div class="col"></div>
   <div class="col"></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

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

javascriptcssanimationfrontend

How can I keep a fixed position element from shifting to the left when resizing the window?

Is there a solution to prevent the logo element from shifting to the left when resizing the window, despite its fixed position? #logo { top:20px; left:50%; margin-left:-177.6px; width:355.2px; height:148.8px; ...

htmlcss

What could be causing my divs to overlap?

I recently started coding and I'm facing an issue with my <header> and <section> divs overlapping each other. I was under the impression that being block elements, <section> should be displayed below <header>. Any suggestions o ...

htmlcss

Putting the second line of a list in a paragraph element with indentation (excluding UL or OL)

I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...

htmlcss

Using Java beans to present form data utilizing session

How can I utilize Java Beans and session beans to store user input data and display a preview of the entered details on the next page? I have already created a servlet using JSP, but now I want to incorporate Java Beans to showcase the form data. How shoul ...

javascripthtmljquerycssjavabeans

Is there a way to display my <i> tags inline without any issues?

I am facing an issue with my code and need assistance. I have two links that I want to display but my code doesn't seem to respond as expected. The first link is: https://i.sstatic.net/fryPH.png The second link is: https://i.sstatic.net/j849M.png A ...

htmlcsstwitter-bootstrap

Setting a border on a specific column in ag-grid is a simple task that can help you customize

I have a table where the first set of columns differs from the rest. I am looking to emphasize this distinction by adding a vertical border on the right side of the specific column to highlight it both in the header and rows. Our setup includes using the ...

cssangularsassag-gridag-grid-angular

Tips for designing a multi-level dropdown navbar

I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...

javascripthtmlvue.jsvuejs3bootstrap-5

Elevate your website design by adding interactive Ripple Buttons using a combination of Javascript and

Recently, I came across a script that allows for an animation to occur when a button is clicked. However, I have encountered an issue where the script does not redirect to a link. (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, rip ...

javascriptjqueryhtmlcssbutton

Do colors appear differently on various screens?

I've noticed that the background color #1ABC9B appears differently on various monitors when viewing my website. On MAC systems and smart phones, it appears as a lighter shade of green compared to other laptops where it appears darker. What could be ca ...

csscolors

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

javascriptjqueryhtmlajax

Tips for keeping two row headers in place on a table while scrolling:

Check out my fiddle here: https://jsfiddle.net/oed1k6m7/. It contains two td elements inside the thead. thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } The code above only makes the first row fixed. How can I make b ...

htmlcsshtml-table

When the page is zoomed in, the image exceeds the boundaries of the parent div

I attempted to position the div elements but did not achieve the desired outcome. .tab-vertical { border: 1px solid black; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

htmlcssbootstrap-4cdn

Rails : CSS/JavaScript functioning perfectly on local server, facing issues on Heroku deployment

My Rails website features various CSS animation effects and JavaScript elements. While these transitions function smoothly on my local environment, they do not work properly on Heroku. Examining the Heroku logs: 2013-09-17T17:13:36.081145+00:00 app[web.1 ...

javascriptcssruby-on-railsheroku

Switching the default image using jQuery upon click event

When I click on the image, I want to see a new image appear for just one second before returning to the default. I tried using setTimeout() function, but even after one second, I still see the same pressed.svg image. Here is my complete code: <html> ...

javascriptjqueryhtml

Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

Looking for a solution specifically for iOS Safari Using -webkit-overflow-scrolling: touch seems to disrupt the 3d perspective on iOS devices. Check out the demonstration on CodePen. HTML <div class="pers"> <div class="scroll"> <di ...

htmlioscssoverflowmobile-safari

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

htmlcssseleniumselenium-ide

Ways to adjust the size of v-btn

Objective: My current task involves enhancing the customization options for Vue components, specifically focusing on adjusting the size of a button component based on user input. Our project utilizes Vuetify. Previous Code: <v-btn @click.prevent=&quo ...

htmlvue.jsbuttonvuetify.js

Conceal elements on smaller screens using the Bootstrap 5 grid system

I'm facing a design issue with my layout - it looks perfect on larger screens but when viewed on mobile devices, the columns stack vertically instead of horizontally. Essentially, I want to hide the first and second last column on small screens and r ...

htmlbootstrap-5

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors