Columns are not properly aligning side by side within the .card class

I am facing an issue where my cards are not lining up inline next to each other in columns but are instead jumping under each other. I have tried setting the col-md-6 class to align two of them next to each other, but that did not work. I have also checked for any column size issues and tried setting different sizes that add up to 12 columns. The container problem also persists. I am trying to understand what I am doing wrong so I can rectify it in the future. Thank you for any assistance.

<section id="jobs" class="py-5 bg-white">
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h1 class="display-3 text-uppercase text-black mb-0">pozice</h1>
        <div class="underline-green bg-green"></div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
        <div class="card-body">
          <h4 class="card-title text-capitalize">asistentka</h4>
          <p class="card-text">
            <h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
            <a href="" class="btn btn-green mt-5">
              <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img src="images/developer.jpg" alt="developer" class="card-img-top">
        <div class="card-body">
          <h4 class="card-title text-capitalize">developer</h4>
          <p class="card-text">
            <h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
            <a href="" class="btn btn-green mt-5">
              <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 col-lg-4 my-3">
      <div class="card">
        <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
        <div class="card-body">
          <h4 class="card-title text-capitalize">obchodník</h4>
          <p class="card-text">
            <h5 class="text-grey font-weight-light pb-3 pt-1">Do našeho kolektivu hledáme kolegyni na pozici asistentky. Možná hledáme právě vás!</h5>
            <a href="" class="btn btn-green mt-5">
              <h6 class="btn-text text-white pt-1 px-4">Zjistit více</h6>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcssbootstrap-4

Answer №1

Make sure all columns are placed in the same row

<section id="jobs" class="py-5 bg-white">
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h1 class="display-3 text-uppercase text-black mb-0">positions</h1>
        <div class="underline-green bg-green"></div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/assistant.jpg" alt="assistant" class="card-img-top">
          <div class="card-body">
            <h4 class="card-title text-capitalize">assistant</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as an assistant. Maybe we are looking for you!</h5>
              <a href="" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Learn more</h6>
              </a>

          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/developer.jpg" alt="developer" class="card-img-top">
          <div class="card-body">
            <h4 class="card-title text-capitalize">developer</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as a developer. Maybe we are looking for you!</h5>
              <a href="" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Learn more</h6>
              </a>

          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-4 my-3">
        <div class="card">
          <img src="images/advertiser.jpg" alt="advertiser" class="card-img-top">
          <div class="card-body">
            <h4 class="card-title text-capitalize">salesperson</h4>
            <p class="card-text">
              <h5 class="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as a salesperson. Maybe we are looking for you!</h5>
              <a href="" class="btn btn-green mt-5">
                <h6 class="btn-text text-white pt-1 px-4">Learn more</h6>
              </a>

          </div>
        </div>
      </div>
    </div>

  </div>
</section>

Answer №2

If you wish to showcase your card inline, it is advisable to place them in the same row rather than separating each card into individual rows. 

<div className="row">
  <div className="col-md-6 col-lg-4 my-3">
    <div className="card">
      <img src="images/assistant.jpg" alt="assistant" className="card-img-top">
      <div className="card-body">
        <h4 className="card-title text-capitalize">asistentka</h4>
        <p className="card-text">
          <h5 className="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as an assistant. It might just be you we are looking for!</h5>
          <a href="" className="btn btn-green mt-5">
            <h6 className="btn-text text-white pt-1 px-4">Learn more</h6>
          </a>
        </p>
      </div>
    </div>
  </div>

  <div className="col-md-6 col-lg-4 my-3">
    <div className="card">
      <img src="images/developer.jpg" alt="developer" className="card-img-top">
      <div className="card-body">
        <h4 className="card-title text-capitalize">developer</h4>
        <p className="card-text">
          <h5 className="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as a developer. It might just be you we are looking for!</h5>
          <a href="" className="btn btn-green mt-5">
            <h6 className="btn-text text-white pt-1 px-4">Learn more</h6>
          </a>
        </p>
      </div>
    </div>
  </div>

  <div className="col-md-6 col-lg-4 my-3">
    <div className="card">
      <img src="images/advertiser.jpg" alt="advertiser" className="card-img-top">
      <div className="card-body">
        <h4 className="card-title text-capitalize">businessman</h4>
        <p className="card-text">
          <h5 className="text-grey font-weight-light pb-3 pt-1">We are looking for a colleague to join our team as an advertiser. It might just be you we are looking for!</h5>
          <a href="" className="btn btn-green mt-5">
            <h6 className="btn-text text-white pt-1 px-4">Learn more</h6>
          </a>
        </p>
      </div>
    </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

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

I have implemented Bootstrap 4 tabs to showcase content fetched through an AJAX call. However, I encountered an issue upon completion of the call. The error message displayed is: Uncaught TypeError: $(...).tab is not a function The tabs are initially hi ...

javascriptjqueryhtmlajaxbootstrap-4

Large Quotation marks with an HTML/CSS design

Is there a way to style a quote using large quotation marks? I've tried various methods found online, such as using Blockquote with the :before and :after CSS styles. However, I'm running into issues with using an image within a div for responsi ...

htmlcsstwitter-bootstrapblockquote

I'm looking for assistance on programmatically adding or modifying the user-agent header in a Chrome browser using Selenium WebDriver. Can anyone help

Seeking assistance on programmatically adding or modifying the user-agent header for Chrome browser using Selenium WebDriver. File addonpath = new File("D:\\innpjfdalfhpcoinfnehdnbkglpmogdi_20452.crx"); ChromeOptions chrome = new ChromeOptions( ...

javajavascripthtmlseleniumtestng

Navigate through the overlay's content by scrolling

Objective: Looking to implement a scroll feature for long content. Issue: Not sure how to create a scroll that allows users to navigate through lengthy content. Thank you! function openNav() { document.getElementById("myNav").style.height = "1 ...

javascriptjqueryhtmlcss

Create a PDF on-the-fly by leveraging Vuejs to dynamically pull data and design elements

Is it possible to create a form that captures name, expiry date, and picture, and upon submission generates a PDF document with the provided details? The PDF should be based on a design created by me and have the input data displayed in a specific location ...

phphtmlcsslaravelvue.js

Navigating in Angular 2: Ways to route to a different page while keeping the HTML hidden from the app.component.html file on the new page

Just recently, I encountered a minor issue. I already have a good understanding of how to navigate between different pages, but there's one thing that bothers me - each time I switch to a new page, the app.component.html always appears at the top of t ...

htmlangularroutesangular2-routing

An easy way to create a hover effect on a URL link and dynamically change the

Is there a way to achieve the following? When hovering over various links, the image on the right changes. If no hover occurs, the default image will be displayed. https://i.stack.imgur.com/QXPXt.png ...

htmlcss

Utilizing Jquery to create a carousel with looping functionality for flowing text

I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon ...

javascriptjquerycssasp.net-mvc-4bootstrap-4

Setting the chosen value within a nested ng-repeat loop

I'm struggling with correctly setting up the select boxes in a form that uses nested ng-repeats. The form has parent table rows generated with an ng-repeat, and each row contains a select box that is linked to an attribute in the parent row. The optio ...

javascripthtmlangularjsselectangularjs-ng-repeat

My website layout got messed up because of Chrome version 48

Once upon a time, I created a website. Despite its outdated design, it has been functioning properly. Even though I know it's time for something new, I've hesitated to make any changes because it still works. Surprisingly, parts of the page layo ...

htmlcssgoogle-chrome

Tips for generating an ordered list that begins with 01

Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...

cssruby-on-railssassslim-lang

Accordions housing Bootstrap 3 pills in a sleek design

I'm working on integrating pills and an accordion in Bootstrap 3. Everything seems to be functioning correctly, but there are a couple of issues I am encountering: When the accordion is open, clicking on another tab closes the accordion. I would li ...

javascriptjquerycsstwitter-bootstrap-3

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

When attempting to move an image on the screen with a touch event, a popup appears in Chrome when pressing and holding the image. This popup usually includes options to save the image. Is there a way to disable this popup so I can freely move the image w ...

javascripthtmlcss

The validation for the number input step in HTML does not function properly when using the value property

Currently working on a form that requires users to input numbers with up to two decimal points, such as valid money amounts. Utilizing Next.js (React) as the JavaScript framework for this project. Encountered an issue where entering a number with more tha ...

javascripthtmlreactjsformsvalidation

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Having trouble with inserting data into MySQL database using PHP?

I am currently facing an issue while attempting to insert data into a MySQL database. Although no errors are appearing during the process, when I try to browse the data, it doesn't seem to be getting inserted into the database. Below is my code, could ...

phphtmldatabaseinsert

Could someone recommend a Bootstrap 4 class for horizontally centering a button?

I am trying to horizontally center a button and I know how to achieve it using CSS: margin: 0 auto; But I was wondering if there is a specific class in Bootstrap4 that can accomplish the same thing? Your assistance is greatly appreciated! <!do ...

bootstrap-4

Choose an option from the drop-down menu in HTML

Using HTML code to select options without closing the option tag is a unique method that is functioning correctly. <div><div class="select-wrapper"> <select name="adult"> <option value="none" />Adults & ...

htmlhtml-select

Tips for deleting Material Angular CSS codes from the head section of your website

I am currently studying AngularJS and Material Angular Design. However, I have noticed that the Material Design includes CSS codes within the <head> tags. See attached screenshot for reference. Is there a way for me to extract these codes from the h ...

cssangularjsangular-material

Expanding the width of a Datatables within a Bootstrap modal

While working on my modal, I encountered an issue with the width of Datatables. Despite trying to adjust it to fit the modal size, it appears like this: https://i.sstatic.net/bLvIJ.png Below is the jQuery code calling the Datatables: function retrieveTa ...

javascriptjqueryhtmltwitter-bootstrapdatatables