I have the following container
where I would like to keep divs
on the same line:
HowcanImakethisalignment?
Followthecodebelow
<html>
<head>
<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.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-2">
<!-- small box -->
<div class="small-box bg-light-blue-gradient" style="margin-top:4%">
<div class="inner">
<h3 id="bateria">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:80px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-green-gradient" style="margin-top:4%">
<div class="inner">
<h3 id="jammer">00<sup style="font-size: 20px"></sup></h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-yellow-gradient" style="margin-top:4%">
<div class="inner">
<h3 id="violacao">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-red-gradient" style="margin-top:4%">
<div class="inner">
<h3 id="roubo">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-purple-gradient" style="margin-top:4%">
<div class="inner">
<h3 id="panico">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-orange" style="margin-top:4%">
<div class="inner">
<h3 id="area">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
<!-- ./col -->
<div class="col-xs-2 col-half-offset">
<!-- small box -->
<div class="small-box bg-aqua" style="margin-top:4%">
<div class="inner">
<h3 id="horario">00</h3>
<p>TESTE</p>
</div>
<div class="icon">
<i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
</div>
<a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>