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

The bootstrap modal form does not allow for user input of information

For the past few days, I've been encountering a strange bug with Bootstrap Modals that I can't seem to find a solution for online. Any help on this matter would be greatly appreciated. The section of my site that is currently giving me trouble i ...

htmlangularjstwitter-bootstrapmodal-dialog

What is the best way to vertically align my image for perfect centering?

On one of my pages at , there is a section titled "FREE PICK UP AND RECYCLING OF LARGE QUANTITIES OF ELECTRONICS" with a picture of a truck. The image is perfectly centered vertically between the pictures on its left and right. Another page I have at fea ...

cssvertical-alignment

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

Enhancing Hover Effects in CSS with Additional Backgrounds

How can I create a div that changes its background to black with 50% opacity when hovered over, on top of an existing background image? Thank you! ...

cssbackgroundhover

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

cssreactjsmaterial-uireact-tablereact-table-v7

What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Firefox is telling me that my pages are being rendered in 'standards compliance mode' based on the doctype... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> After changing it to < ...

htmlcss

Tips on designing checkboxes with CSS

Can someone help me figure out how to style a checkbox using the code below? <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> I've tried applying this style but it doesn't seem to work. The chec ...

htmlcsscheckbox

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

cssangularjsanimationangularjs-ng-repeatng-animate

Jquery is not displaying the background color of the progress bar

Greetings to all! I am currently working on implementing a progress bar for my website, but I am encountering an issue where the background-color is not displaying correctly on scroll. I would greatly appreciate any assistance with this matter. Below you c ...

javascriptjqueryhtmlcss

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

javascriptjqueryhtmlcss

Android not showing scroll bar in ion-scroll feature

I am experiencing an issue where a div with a fixed height displays a scroll bar on browsers but not on an Android phone. <ion-scroll style="height:300px;" scrollbar-y='true'> //content </ion-scroll> ...

cssangularjsionic-framework

The Transition Division Is Malfunctioning

I've encountered an issue where I am trying to move a div by adjusting its left property, but no transition is taking place. Regardless of the changes I make to my code, the result remains the same. Below is the current state of the code. Can anyone i ...

javascripthtmlcssangularjs

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

javascriptjqueryhtmlcssjquery-select2

Is there a way to arrange the components of my form so that the questions are positioned on the left side and the choices are displayed on the right

As I am creating a form, my goal is to align the information within it in a way that places the questions on the left side and the options on the right. I have experimented with utilizing IDs, centering them, and adjusting their positioning from left to r ...

htmlcssformsalignment

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

Table Dimensions Dream Weaver

After creating a basic PHP webpage using Dream Weaver CS5 Version 11.0 Build 4964, I encountered an issue. My webpage is structured with a table containing 10 rows, each row consisting of a single cell. Within each table cell, there is a nested table tha ...

phphtmlcsshtml-tabledreamweaver

Ways to retrieve a JSON element and incorporate it into a CSS styling

Can someone assist me in converting a JSON object for use in CSS? I've attempted to do this using Vue.js, creating a map legend with v-for to generate the legend. However, if there is an alternative method that allows me to take a JSON object and ins ...

javascripthtmlcssjsonvue.js