CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Cactus
Cactus

Reputation: 924

html and css with bootstrap: grid structure does not align

I am trying to use the grid structure by bootstrap to create a nice looking page. However, my div is moved and columns in rows are not aligned anymore:

The box with the three should be in line with the blue background. What am I doing wrong? What is the reason for this? I would like to understand. My code is:

EDIT1

I added no-margto the <h1>but now it looks like this: How can I get to fill out the full height? enter image description here

.no-marg{
	margin:0 !important;
	padding:0 !important;
}

.sm-pad{
	padding:5px;
	background-clip:content-box;
}

.col-white{
	color:white;
}

.dark-theme {
 color: white;
 background-color:#17191B; 
 height: 100%;
}

#step-no{
	margin:20px;
}

.light-theme {
 color: black;
 background-color:#EFEFEF;
}

.cont-box {
	margin:6px;
 
}


body { 
background: black; 
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

.red-square{
	background-color: red;
	border-radius: 0;
}

.btn:hover{
	background-color: #78BE20;
}



.blue-rectangle{
	background-color: #008ECF;
	border-radius: 0;
	height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>


<body>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10">
		<h1 class="col-white">Step</h1>
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10 blue-rectangle">
		<div class="row equal">
			<div class="col-sm-3">
				<div class="dark-theme">

				<h1 class="col-white">3</h1>		
				</div>
			</div>
			<div class="col-sm-9">
				<span color<img alt="Warning Logo" src="./image/warning.svg">
			</div>
		</div>
			<div class="row equal">
			<div class="col-sm-6">
			</div>
			<div class="col-sm-6">
			</div>
		</div>		
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>





<script src="steps_v1.js"></script>    
</body>
</html>

Upvotes: 0

Views: 47

Answers (2)

Soronbe
Soronbe

Reputation: 926

The box has a margin-top. Set it to 0

.no-marg{
	margin:0 !important;
	padding:0 !important;
}

.sm-pad{
	padding:5px;
	background-clip:content-box;
}

.col-white{
	color:white;
}

.dark-theme {
 color: white;
 background-color:#17191B; 
 height: 100%;
}

#step-no{
	margin:20px;
}

.light-theme {
 color: black;
 background-color:#EFEFEF;
}

.cont-box {
	margin:6px;
 
}


body { 
background: black; 
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

.red-square{
	background-color: red;
	border-radius: 0;
}

.btn:hover{
	background-color: #78BE20;
}



.blue-rectangle{
	background-color: #008ECF;
	border-radius: 0;
	height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>


<body>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10">
		<h1 class="col-white">Step</h1>
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10 blue-rectangle">
		<div class="row equal">
			<div class="col-sm-3">
				<div class="dark-theme">

				<h1 class="col-white no-marg">3</h1>		
				</div>
			</div>
			<div class="col-sm-9">
				<span color<img alt="Warning Logo" src="./image/warning.svg">
			</div>
		</div>
			<div class="row equal">
			<div class="col-sm-6">
			</div>
			<div class="col-sm-6">
			</div>
		</div>		
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>





<script src="steps_v1.js"></script>    
</body>
</html>

Upvotes: 1

vishnu
vishnu

Reputation: 2948

Add display: -webkit-box; to .dark-theme

.no-marg{
	margin:0 !important;
	padding:0 !important;
}

.sm-pad{
	padding:5px;
	background-clip:content-box;
}

.col-white{
	color:white;
}

.dark-theme {
 color: white;
 background-color:#17191B; 
 height: 100%;
 display: -webkit-box;
}

#step-no{
	margin:20px;
}

.light-theme {
 color: black;
 background-color:#EFEFEF;
}

.cont-box {
	margin:6px;
 
}


body { 
background: black; 
}

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

.red-square{
	background-color: red;
	border-radius: 0;
}

.btn:hover{
	background-color: #78BE20;
}



.blue-rectangle{
	background-color: #008ECF;
	border-radius: 0;
	height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="work_step_v1.css">
</head>


<body>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10">
		<h1 class="col-white">Step</h1>
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>

<div class="row equal">
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-arrow-left"></span>&nbsp;
	</div>
	<div class="col-sm-10 blue-rectangle">
		<div class="row equal">
			<div class="col-sm-3">
				<div class="dark-theme">

				<h1 class="col-white">3</h1>		
				</div>
			</div>
			<div class="col-sm-9">
				<span color<img alt="Warning Logo" src="./image/warning.svg">
			</div>
		</div>
			<div class="row equal">
			<div class="col-sm-6">
			</div>
			<div class="col-sm-6">
			</div>
		</div>		
	</div>
	<div class="col-sm-1 red-square">
		<span style="font-size: 40px" class="col-white glyphicon glyphicon-cog"></span>&nbsp;
	</div>
</div>





<script src="steps_v1.js"></script>    
</body>
</html>

Upvotes: 0

Related Questions