Home How to use Sitemap About Us

Feel The Power


content logo
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
FIND US
LINK US
download Link to us:
Site Logo
Please put this code in your page.