Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Home Home How to How to use Sitemap Sitemap About us About Us

Feel The Power


content logo
Bootstrap Grids: Circular Bootstrap Grids with Hover Effect
Previous Code Next Code

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
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
RECENT CODES
Dual Toggle Switches with Bootstrap
Change Background Color with Bootstrap Switch
Bootstrap Switches for Mobile Devices
Day and Night Bootstrap Switch Button
Bootstrap Toggle Switch with Effect
Bootstrap Toggle Switch with Color Change Effect
Toggle Switch Button for Changing Language with Bootstrap
Bootstrap Switch with Text Change
Colorful Bootstrap Toggle Switches
Show/Hide Text with Bootstrap Switch
CATEGORIES
Bootstrap Sidebars
Bootstrap Search Boxes
Bootstrap Tabs
Bootstrap Grids
Bootstrap Forms
Bootstrap Headers
Bootstrap Tables
Bootstrap Cards
Bootstrap Footers
Bootstrap Buttons
Bootstrap Thumbnails
Bootstrap Toggle Switches
FIND US
Twitter LinkedIn YouTube
LINK US
download Link to us:
Site Logo
Please put this code in your page.
Frontend Free Code
© 2021 Kerixa Inc