I have been struggling with a layout issue for the past couple of days and I am in need of assistance from someone who can help me. Unfortunately, I am unable to upload an image here as I am new and do not yet have enough reputation points.
The Layout Structure:
Section 1
First row: Centered heading
Second row: 6 icons spread out across the width of the page, each with a short description below
Section 2
First row: Two headings separated by a white vertical line in the middle of the page
Second row: 6 icons spread out across the width of the page, divided into 3 for each heading with a vertical line separating them
I was able to get the first section working using CSS classes like container-fluid, row, col-sm-2 in Twitter-Bootstrap. However, I am facing difficulties implementing the border-right white line and dividing the icons into two sections in the second row.
The code snippet used for the first section is provided below:
<div class="container-fluid">
<h5 class="text-center">HEADER 1</h5>
<ul class="row">
<li class="col-xs-4 col-sm-2">
<img src="img/1.png" alt="icon1">
<p class="text-center">2-word description</p>
</li>
...
</ul>
<hr>
</div><!-- /.container-fluid -->
I am now seeking help on how to include a white vertical line between the two headers and split the icons accordingly in the second section.
The code snippet for the second section is also included below:
<div class="section2">
<div class="left container-fluid">
...
</div><!-- /.left .container-fluid -->
<div class="right container-fluid">
...
</div><!-- /.right .container-fluid -->
</div><!-- /.section2 -->
Your assistance in resolving this issue would be highly appreciated!
Thank you!
New Question:
Hello! I have another query that I need help with. While working on @mediaqueries and resizing the screen, I noticed that the icons and their descriptions are not perfectly centered. The descriptions appear slightly to the right of the respective icons. I have tried using text-center class in Bootstrap and applying margin: 0 auto in CSS without success. Can you guide me in identifying what might be causing this misalignment?
I appreciate your help in advance!