Issue in setting steps according to up and down format

HTML & CSS
1

I am making a wizard type steps, but facing some alignment issue in making my steps up and down
like my first step should be upward then my 2nd step should be downward as per my attached images.

I have written my CSS and html please suggest some idea how I can resolve this issue.

<!DOCTYPE html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		
.stepwizard-step p {
    margin: 7px auto 0px auto;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc !important;
    padding: 5px;
    width: 80%;
    color:#333;
}

.stepVl{
    height: 32px;
    width:0px;
    border: 1px dashed #ccc;
    margin: 0 auto;
 }

.stepwizard-step p::after{
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-bottom: solid 10px #ccc;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    top:85px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard .stepwizardPointer{
       height: 10px;
       color: #ccc;
       border-left: 10px solid #ccc;
       margin-top: 11px;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 3px;
    background-color: #ccc;

}

.stepwizard-heading {
    margin-top: -20px;
    font-weight: normal;
    color: #000;
    font-size: 14px;
}


.stepwizard-step span{
    color:#666;
    display:block;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
  background: #ddd;
  border: 2px solid #ccc;
  font-weight:bold;
  color:#333;
}

.step-heading{
    text-align: left;
    color:#000;
}

	</style>
</head>
<html>			
<body>			
			<div class="row">
				<div class="col-md-12">
					 <div class="stepwizard mt-40 mb-20">
						<div class="stepwizard-row setup-panel">
							<div class="stepwizardPointer"></div>
								<div class="stepwizard-step">
									<div class="stepwizard-heading">Jul 2018 Present</div>
									<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
									<div class="stepVl"></div>
									<p class="step-heading"><strong>Heading</strong>
										<span class="fontsize14">Subheading</span>
										<span><a class="fontsize14" href="#!">view more</a></span>
									</p>
								</div>
							
							<div class="stepwizard-step">
								<div class="stepwizard-heading">May 2017</div>
								<a href="#step-1" type="button" class="btn btn-primary btn-circle">2</a>
								<div class="stepVl"></div>
								<p class="step-heading"><strong>heading</strong>
									<span class="fontsize14">subheading</span>
									<span><a class="fontsize14" href="#!">view more</a></span>
								</p>
							</div>
							<div class="stepwizard-step">
								<div class="stepwizard-heading">Oct 2016 Apr 2017</div>
								<a href="#step-1" type="button" class="btn btn-primary btn-circle">3</a>
								<div class="stepVl"></div>
								<p class="step-heading"><strong>heading</strong>
									<span class="fontsize14">sub-heading</span>
									<span><a class="fontsize14" href="#!">view more</a></span>
								</p>
							</div>
							<div class="stepwizard-step">
								<div class="stepwizard-heading">Oct 2016 Apr 2017</div>
								<a href="#step-1" type="button" class="btn btn-primary btn-circle">4</a>
								<div class="stepVl"></div>
								<p class="step-heading"><strong>heading</strong>
									<span class="fontsize14">subheading</span>
									<span><a class="fontsize14" href="#!">view more</a></span>
								</p>
							</div>
							<div class="stepwizardPointer pull-right"></div>
						</div>
						<div class="clearfix"></div>
					</div> <!--wizard end -->   
						 
				</div>
            </div>
					
</body>					
</html>

I need to achieve this result:

timeline-wizard
timeline-wizard785×334 4.57 KB

2

…and what is the result now?

3

this is my result now…

result
result1020×178 4.46 KB

4

Hi,

I would do this with either flexbox or the display:table properties.

Probably easier with table display and using three rows. Top row for the top boxes, middle row for the line and the third row for the bottom boxes. The display:table and table-cell routines would ensure all items are automatically aligned no matter how much text there is and whatever size the user may have chosen for it. No guesswork needed at all and no fixed heights needed either.

Flex box could probably do this also but grid can certainly do it.

Unfortunately I am not on a computer at the moment so cannot knock up a demo but I’m sure one of the others here will step on with ode suggestions :slight_smile:

1 Like
5

thanks for your reply, I tried with your answer but my Issue coming with the alignment of middle circle and their dotted vertical line, will you please suggest me with some CSS and HTML code to write this stack…

Once again thank you very much for your time and advice.

Thanks

6

If you post the code you’re using now, we can help you with the adjustments.

1 Like
7

Hi,

Here are a few hints for you:

You would still need to flesh it out a bit more with the finer details and arrange a small screen version etc but it should get you started.

1 Like
8

thanks PaulOB,

its a great help for me…

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.