Bootstrap Snippet Text inside a Circle using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="quote-wrapper">
  <blockquote class="text" cite="https://www.successories.com/iquote/author/24879/rig-veda-quotes/1">
    <p>If a householder moulds himself according to the circumstances just like nature moulds Herself according to seasons and performs his Karma then only shall he acquire happiness. One who does this successfully gains in all walks of life.</p>
    <footer>– Rig Veda Quotes
</footer>
  </blockquote>
</div>
<!--THIS HTML IS NOT REQUIRED FOR CIRCULAR TEXT-->
<p class="note"><a href="https://drafts.csswg.org/css-shapes-2/#propdef-shape-inside" target="_blank">Note: A future
    level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the
    element.</a></p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
*,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  font-family: "Titillium Web", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  color: #161b1e;
}
.quote-wrapper {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 10vh auto 0; /*OPTIONAL MARGIN*/
}
.text {
  width: 100%;
  height: 100%;
  /*BLUE BG*/
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  /*RED BG
  background: radial-gradient(
    ellipse at center,
    rgba(210, 20, 20, 1) 0%,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text inside a Circle"
Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"Text inside a Circle" Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"Text inside a Circle"
Bootstrap 4.1.1 Snippet by divyalahad