Circle Block

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

Circle Block Example

Class .cl-circle-wrapper is used to create circular container. Elements with classes .cl-top, .cl-top-right, .cl-right, .cl-bottom-right, .cl-bottom, .cl-bottom-left, .cl-left and .cl-top-left contains the content and places it on the position, specified by the class name, of the circular container.

<div class="cl-circle-wrapper">

    <div class="cl-top text-center">
        ...
    </div> <!-- top item ends -->

    <div class="cl-top-right text-center">
        ...
    </div> <!-- top-right item ends -->

    <div class="cl-right text-center">
        ...
    </div> <!-- right item ends -->

    <div class="cl-bottom-right text-center">
        ...
    </div> <!-- bottom-right item ends -->

    <div class="cl-bottom text-center">
        ...
    </div> <!-- bottom item ends -->

    <div class="cl-bottom-left text-center">
        ...
    </div> <!-- bottom-left item ends -->

    <div class="cl-left text-center">
        ...
    </div> <!-- left item ends -->

    <div class="cl-top-left text-center">
        ...
    </div> <!-- top-left item ends -->

</div> <!-- circle wrapper ends -->