I am attempting to display the name 'test' three times in a row and three times in the second row, but it is not appearing horizontally as intended.
Instead, everything is displaying in a vertical column pattern...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>bootstrap</title>
<div class="services container">
<h2>Services</h2>
<div class="row">
<section class="col-md-6 col-md-4">
<img class="icon" src='images/cabbage.png' alt="Icon">
<h3>Vegitables</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/car.png' alt="Icon">
<h3>Cars</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/clothes.png' alt="Icon">
<h3>cloths</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
</div>
<div class="row">
<section class="col-md-6 col-md-4">
<img class="icon" src='images/motorcycle.png' alt="Icon">
<h3>Motorcycle</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/pet-icon.png' alt="Icon">
<h3>Pets</h3>
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>
</section>
<section class="col-md-6 col-md-4">
<img class="icon" src='images/phone.png' alt="Icon">
<h3>Phone</h3>
<p>
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
</p>
</section>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
//my css code
.icon{
max-width: 150px;
margin: 0 auto;
display: block;
}
.service section{
text-align: center;
}
Is there any way to make this code work as intended? Are there any necessary corrections or suggestions?