CODEWITHSUNDEEP
htmlcss
Sonam Singh
Sonam Singh

Reputation: 225

How to add three dots to span element

.step_one {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_two {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_three {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.three_steps {
  padding-bottom: 25px;
  padding-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="signup_start col-md-offset-1 col-md-10">
  <div class="signup_heading">
    <h1 class="signin_txt">SIGNUP WITH US IN JUST 3 STEPS !</h1>
  </div>
  <div class="col-md-12 col-sm-12 col-xs-12 text-center padd_lr three_steps">
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_one">1</span>
      <span class="dotted">         </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_two">2</span>
      <span class="dotted">        </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_three">3</span>
    </div>
  </div>
</div>

How can I add three dots between step1 and step2, step2 and step3?

Upvotes: 2

Views: 1260

Answers (4)

Marius Brits
Marius Brits

Reputation: 312

I added some <br/> to the end of your step <span> in the HTML and a new CSS object

.dotted {
  border-top: 5px dotted black;
}

Upvotes: 1

Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

You can actually solve it with the background

.three_steps{
    background: url("/img/table-tr.png") repeat-x 0 7px
}

To have some space between text and dots, add paddings. Let's say

.step_one{
  padding-right: 10px;
}
.step_two{
  padding-left: 10px;
  padding-right: 10px;
}
.step_three{
  padding-left: 10px;
}

That's it. Simple and works with responsive layouts as well

Upvotes: 1

Jazzzzzz
Jazzzzzz

Reputation: 1633

Here you go :)

.left{
            float: left;
        }
        .dotted{
            display: inline-block;
            height: 5px;
            border-top: 2px dotted #31cae3;
            width: 16px;
            margin:0px 10px;
        }
        .step_one
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .step_two
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .step_three
        {
            background-color:#31cae3;
            color:#fbf8f8;
            font-family: 'Rubik';
            font-style: normal;
            font-weight: 400;
            font-size:16px;
            text-align:center;
            border-radius:50%;
            padding:10px 15px;
        }
        .three_steps
        {
            padding-bottom: 25px;
            padding-top: 10px;
        }
<div class="signup_start col-md-offset-1 col-md-10">
    <div class="signup_heading">
        <h1 class="signin_txt">SIGNUP WITH US IN JUST 3 STEPS !</h1>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 text-center padd_lr three_steps">
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_one">1</span>
            <div class="dotted"></div>
        </div>
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_two">2</span>
            <div class="dotted"></div>
        </div>
        <div class="left col-md-4 col-sm-4 col-xs-4 padd_lr">
            <span class="step_three">3</span></div>
    </div>

Upvotes: -1

Kamil Powroźnik
Kamil Powroźnik

Reputation: 75

Sorry but I can't comment. Do you want something like this?

.right {
  height: 20px;
  border-right: 1px dotted black;
}

http://codepen.io/powro01/pen/NRmVxw

Upvotes: 0

Related Questions