Circular Bootstrap Grids with Hover Effect

Bootstrap Grids: Circular Bootstrap Grids with Hover Effect

One of the main bootstrap features is its grid systems which lets you make columns in your page. However, the grids are rectangular! You might need to create a circular rotated cols. If yes, please see the following code example and follow the codes. Enjoy!

#Bootstrap Circle Grids #Bootstrap Rounded Grids #Bootstrap Circular Rounded Cols

<!-- this script got from www.frontendfreecode.com -->
<div class="container-fluid">
  <div class="row mt-3">
      
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description<br>
                 Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>

.do-circle {
  border-radius: 50%;
}

.do-item {
  width: 100%;
  height: auto;
  position: relative;
}

.do-item-circle {
  max-width: 261px;
}

.do-item-square {
  max-width: 350px;
}

.do-info-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  transition: all 0.4s ease-in-out;
  perspective: 800px;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2);
}

.do-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.do-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.do-info .do-info-back {
  transform: rotate3d(0, 1, 0, 180deg);
  background: #000;
}

.do-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  margin: 0 5px;
  padding: 40px 0 0 0;
  height: 70px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.do-info-back {
  text-align: center;
}

.do-info-back > div {
  color: #fff;
  padding: 0px 5px;
  margin: 0 3px;
  font-size: 8px;
  border-top: 1px solid #fff;
}

.do-item:hover .do-info-wrap {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8);
}

.do-item:hover .do-info {
  transform: rotate3d(0, 1, 0, -180deg);
}

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.do-circle {
  border-radius: 50%;
}

.do-item {
  width: 100%;
  height: auto;
  position: relative;
}

.do-item-circle {
  max-width: 261px;
}

.do-item-square {
  max-width: 350px;
}

.do-info-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  transition: all 0.4s ease-in-out;
  perspective: 800px;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2);
}

.do-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.do-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.do-info .do-info-back {
  transform: rotate3d(0, 1, 0, 180deg);
  background: #000;
}

.do-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  margin: 0 5px;
  padding: 40px 0 0 0;
  height: 70px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.do-info-back {
  text-align: center;
}

.do-info-back > div {
  color: #fff;
  padding: 0px 5px;
  margin: 0 3px;
  font-size: 8px;
  border-top: 1px solid #fff;
}

.do-item:hover .do-info-wrap {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8);
}

.do-item:hover .do-info {
  transform: rotate3d(0, 1, 0, -180deg);
}
</style>

</head>
<body>
<div class="container-fluid">
  <div class="row mt-3">
      
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description<br>
                 Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="do-item do-item-circle do-circle">
        <img src="https://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Title Here</h3>
              <div>Description
                <br /> Author / Date</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>

Preview

RECENT CODES

Bootstrap Header Menu with Dynamic Height

Bootstrap Pricing Table with Color Change

Bootstrap Assigning Project List

Bootstrap Accordion Form Wizard

Bootstrap Grids with Various Hover Effect

Bootstrap Image Gallery with Zoom Effect

Bootstrap Users Profile with Tabs

Bootstrap Pricing Table with Zoom Effect

Bootstrap Shopping Cart Table

Bootstrap Dark/Light Switching Header Menu

Feel The Power

Bootstrap Grids: Circular Bootstrap Grids with Hover Effect

What are You Looking for?

Watch how to Create the Tool!

The Tool Demo