Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

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!

htmlcsstwitter-bootstrap

Answer №1

Before proceeding, think of .section2 as a row, with two children called header1 and header2. Add class="row" to this div and apply class="col-xs-12 col-sm-6" to each header block.

Now, consider each header block as an individual row, consisting of 3 images with descriptions. Repeat the same steps as before.

The use of .container-fluid, .left, and .right is no longer necessary because the parent .row and its children's .col-* classes will take care of these for you.

Update: I apologize for not addressing the issue of the blank space in the middle. This is caused by the default styling of <ul>, but can be fixed by adding ul { padding-left: 0;}.

For reference, check out this example fiddle.

Answer №2

Divide your second segment into two primary rows, each of which includes additional rows for the titles and corresponding symbols. Apply a border-right to the first row.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving Vertical Alignment of Text with CSS

Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned? <html> <head> <style> body { ...

csshtmllayoutcss-float

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

pythonhtmlmysqldjango

Encountering difficulties connecting to the database within Vue data tables

My php script was working fine with vuetify data, but now every page is showing the error message: Your search for "{{ search }}" found no results. It seems like this issue occurs when the script cannot fetch data from the database. Here is my d ...

phphtmlsqlvue.jsvuetify.js

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

phpjqueryhtmljson

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

javascriptpythonhtmlseleniumbeautifulsoup

How do I implement a dynamic input field in Angular 9 to retrieve data from a list or array?

I'm looking to extract all the strings from the Assignes array, which is a property of the Atm object, and populate dynamic input fields with each string. Users should be able to update or delete these strings individually. What approach can I take us ...

htmlangulartypescript

What is the best way to incorporate three divs into a single line while maintaining a responsive design

Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...

htmlcssflexbox

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Currently, I am working on developing a website locally with the intention of later transferring it via FTP to my server. In my index.php file, there is a line that reads: <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/header.php");?&g ...

javascriptphphtmlcss

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

javascriptjqueryhtml

JsPlumb: Incorrect endpoint drawn if the source `div` is a child of a `div` with `position:absolute`

My current setup involves two blue div elements connected by jsPlumb. You can view the setup here: https://jsfiddle.net/b6phv6dk/1/ The source div is nested within a third black div that is positioned 100px from the top using position: absolute;. It appe ...

javascripthtmlcssjsplumb

Is there a way to click on a button and have its background color change randomly each time?

I am facing an issue with a button on my HTML page. When the button is clicked, I want its background color to change to a random different color. However, despite trying various sources, I am unable to get it right. It seems like I am not placing the code ...

javascripthtmlcss

Display full lines of nested tree view HTML lists upon hovering using HTML, CSS, Angular, and Bootstrap

I currently have an Angular 4 application where a left-side div displays a tree of items as recursive HTML lists. The issue I am facing is that long texts within this div get cut off by the right border, with a scrollbar appearing instead. What I would lik ...

htmlcssangularbootstrap-4

Expanding the visual in a spacious display with the help of ng-carousel from the Bootstrap framework

I have created a slider with multiple images on a website using Angular 4. The slider is displayed in a small area of the webpage and I would like to add a feature where the user can click on an image to view it in a larger screen or window. This could i ...

javascripthtmlangularbootstrap-4angular5

What is the best way to change the background color for my photo gallery?

I'm currently working on a project to create a unique photo gallery where each image has a different colored background. I have six images in total, but right now all of them have a pink background. I've attempted adding another .popup class in t ...

javascripthtmlcss

Animating images with Jquery

As a beginner in Javascript and Jquery, I am currently learning about image animation. However, I have encountered a question regarding moving an image from bottom left to top right within the window. Is there a more efficient way to achieve this compared ...

javascripthtmljquery

Sending a request to a PHP file using Ajax in order to display information fetched from

I am attempting to display the database row that corresponds with the student's forename and surname selected from the dropdown list. I have managed to store the first name and surname in a variable called clickeditem. However, I suspect there may be ...

phpjqueryhtmlmysqlajax

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

What is the best way to pass card data between Vue.js components?

My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user cl ...

javascripthtmlcssvue.jsaxios

What is the best way to instantiate objects, arrays, and object-arrays in an Angular service class?

How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...

javascripthtmlangulartypescript

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js