Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are still aligned left due to the float property. Removing the left float results in vertical alignment. How can I correctly apply the columns in this scenario?

<div class="container">
  <div class="flip-cards col-lg-12">
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
    <div class="info-card col-lg-4">
      <div class="front">
          <h3>Header</h3>
      </div>
      <div class="back">
        <p>Title</p>
        <h6>lorem ipsum</h6>
      </div>
    </div>
  </div>
</div>

CSS

.container{
  background-color: #eee;
}
.flip-cards .info-card {
  float: left;
  margin: 2% 1% 0% 1%;
  padding: 5% 0% 5% 0%;
  position: relative;
  -webkit-perspective: 600px;
}
.flip-cards .info-card:hover .back {
  -webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
  -webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
  transition: -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
  background-color: #fff;
  overflow: hidden;
  width: 200px;
  height: 170px;
  position: absolute;
  opacity: .5;
}
.flip-cards .info-card .front h3 {
  text-decoration: underline;
  padding: 10px;
  text-align: left;
  color: #6633cc;
}
.flip-cards .info-card .back {
  background-color: #6633cc;
  width: 200px;
  height: 170px;
  -webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
  color: #fff;
  padding: 7px 0px 0px 10px;
  font-size: 10px;
}
.flip-cards .info-card .back h6 {
  font-weight: 400;
  color: #fff;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  bottom: 0;
}
.flip-cards .info-card .back h6 a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 400) {
  .flip-cards {
    margin-left: -3%;
  }

  .card-outer-wrapper {
    height: 260px;
    margin-bottom: 40px;
    max-width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }

  .card-outer-wrapper .card-wrapper {
    overflow-x: scroll;
    width: 200%;
  }
}

JSFIDDLE: https://jsfiddle.net/sxLodk6r/

csstwitter-bootstrap

Answer №1

Let's take another shot at this.

This time, I'll identify all the code that needs fixing and provide the final HTML and CSS code for your convenience.

  1. Add a grid below <div class="row"> in Bootstrap.

    <div class="container">
    <div class="row"> <!-- Add This -->
        <div class="flip-cards col-lg-12 ">
        ...
        </div>
    </div> <!-- Add This -->
</div>

  2. Avoid adding classes with padding and margin at the same level as the grid class.

     <div class="col-lg-4">
     <div class="info-card "> <!-- Separate this class -->
         ...
     </div>
 </div>

  3. Avoid using percent values in margin/padding top/bottom to make it easier when defining the position of .back later on.

    .flip-cards .info-card {
    margin: 20px 10px 0 10px;
    padding: 10px 0 10px 0;
}

  4. To align .info-card center, replace float:left with display:inline-block in .info-card and add .text-center with .col-lg-4

    .flip-cards .info-card {
    display: inline-block;
    float: left;  /* Remove This! */
}

<div class="col-lg-4 text-center">
    <div class="info-card ">
    ...
    </div>
</div>

  5. Remove overflow:hidden in .front, instead, remove the margin-top in h3.

    .flip-cards .info-card .front { {
    overflow: hidden;   /* Remove This */
}

.flip-cards .info-card .front h3 {
    margin-top: 0px;
}
</div>

  6. Get rid of position:absolute in .front.

    .flip-cards .info-card .front {
    position: absolute;  /* Remove This! */
}

  7. Include position:absolute and top:10px in .back.

    .flip-cards .info-card .back {
    background-color: #6633cc;
    width: 200px;
    height: 170px;
    position: absolute;
    top:10px;
    -webkit-transform: rotateY(-180deg);
}

My Updated HTML Code

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="flip-cards col-lg-12 ">
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="info-card ">
                        <div class="front">
                          <h3>Header</h3>
                        </div>
                        <div class="back">
                            <p>Title</p>
                            <h6>lorem ipsum</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

My Revised CSS Code

.container{
  background-color: #eee;
}
.flip-cards .info-card {
  display: inline-block;
  margin: 20px 10px 0 10px;
  padding: 10px 0 10px 0;
  position: relative;
  -webkit-perspective: 600px; 
}
.flip-cards .info-card:hover .back {
  -webkit-transform: rotateY(0);
}
.flip-cards .info-card:hover .front {
  -webkit-transform: rotateY(180deg);
}
.flip-cards .info-card .front, .flip-cards .info-card .back {
  transition: -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}
.flip-cards .info-card .front {
  background-color: #fff;
  width: 200px;
  height: 170px;
  opacity: .5;
}
.flip-cards .info-card .front h3 {
  text-decoration: underline;
  padding: 10px;
  text-align: left;
  color: #6633cc;
  margin-top: 0px;
}
.flip-cards .info-card .back {
  background-color: #6633cc;
  width: 200px;
  height: 170px;
  position: absolute;
  top:10px;
  -webkit-transform: rotateY(-180deg);
}
.flip-cards .info-card .back p {
  color: #fff;
  padding: 7px 0px 0px 10px;
  font-size: 10px;
}
.flip-cards .info-card .back h6 {
  font-weight: 400;
  color: #fff;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  bottom: 0;
}
.flip-cards .info-card .back h6 a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 400) {
  .flip-cards {
    margin-left: -3%;
  }
  .card-outer-wrapper {
    height: 260px;
    margin-bottom: 40px;
    max-width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }
  .card-outer-wrapper .card-wrapper {
    overflow-x: scroll;
    width: 200%;
  }
}

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

Blinking Effect of New Element in JQuery ListView

I'm attempting to implement AJAX functionality in a JQuery listview that will make flash yellow, but unfortunately I am having trouble getting it to work. Could someone provide me with some guidance? http://jsfiddle.net/zFybm/ ...

jquerycssjquery-uijquery-mobile

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

javascripthtmlcssangulartypescript

Creating hyperlinks to files dynamically in Angular can be easily achieved by utilizing JSON $ref

My Angular website includes a Bootstrap card that utilizes *ngFor to display a title, document name, and extension. Here is an example: I would like the "handbook_2017.pdf" to be a clickable hyperlink that opens or downloads the file based on the user&apo ...

jsontwitter-bootstrapangularhrefngfor

Having trouble with the contact form? It seems to be experiencing issues with

Hey there! I'm encountering an issue with the following codes, where I'm getting redirected and receiving an error message stating "Undefined variable: subject in C:\wamp\www\boot\send.php on line 42." Any help would be greatl ...

phphtmlcss

Issue with AnimeJS Motion Path causing element to deviate from desired SVG path

I'm attempting to use an SVG element and the AnimeJS library to make the orange marker follow the course of this RC car race track. https://i.stack.imgur.com/8FKHC.png Despite my efforts, I am encountering strange and undesirable outcomes. At times ...

javascripthtmlcsssvganime.js

Expanding and collapsing multiple rows within a Bootstrap grid

Seeking advice on Bootstrap and its implementation of columns and rows. Currently facing a cascading effect where I have managers, followed by employees, and then employee family members. The challenge lies in my limited understanding of how Bootstrap uti ...

htmlcsstwitter-bootstraprows

Issues arise when implementing ReactJS transitions for progress bars

As a newcomer to the world of ReactJS, I have been exploring the FB documentations and online tutorials to kickstart my test project. Within this project, I wanted to implement a progress bar that visually represents the user's progression through fi ...

cssreactjs

How to create a fixed header navigation in SquareSpace

If you take a look at my Squarespace website using the Adirondack theme over here: The issue I'm facing is that whenever I scroll on either desktop or phone, the top header area shrinks. Currently, the navigation remains fixed on the screen and the l ...

htmlcss

What is the best way to shift the lower section to align with the right side of the rest of the headers and text blocks?

Help needed with moving the Uni section to align it beside other paragraphs and headers. Tried using float left but no luck so far. Any suggestions would be appreciated! Check out the code here <div class ="container"> <div id="education" class ...

htmlcsscss-float

What is the best way to give a video a border-radius in an HTML/CSS code?

Is there a way I can apply border-radius to the <video> element? This is what my video currently looks like: (image shown here: <a href="https://i.sstatic.net/izKz0.png") I attempted styling the video tag with CSS, but the changes did ...

htmlcssvideostylingborder-radius

Safari 5 experiences delays with JQuery and CSS3 animations

Encountering issues with jQuery animations specifically in Safari 5 on my Windows system. Struggling with a simple image fade slider that still has some flickering. The slider involves click events moving two pages at once, one active page right and the o ...

jquerycssanimationsafarilag

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

css

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

javascripthtmlcssreactjs

Why isn't my CSS transition animation working? Any suggestions on how to troubleshoot and resolve

I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...

javascripthtmlcsssass

Issues with card flip functionality in Firefox

I designed this animation specifically for my website to create a unique effect. The animation involves translating on the Z-axis, making it appear as though the object is getting smaller, flipping to reveal the back of the card, and then translating back. ...

htmlangularcssangular5

How to make a div stretch to full browser height using CSS and jQuery

I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...

jqueryhtmlcss

Personalized hyperlink element with interjected spacing

I am currently in the process of designing a component library that is based on lit web components. However, I have a suspicion that my issue may not be directly related to Lit itself, but rather connected to shadow DOM. Within my link component, I have d ...

htmlcssweb-componentshadow-dom

Tips on making a dropdown select menu expand in a downward direction

I'm currently using a select element to choose options from a dropdown list, but because of the large number of items, the list displays in an upward direction instead of downwards. I am working with Bootstrap. I have reviewed other code samples with ...

htmlcss

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

htmlcss

Unable to implement the `omega/theme.css` file within the angular.json configuration

"styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/primeicons/primeicons.css", ...

cssangularprimeng