label bootstrap circular navigation

/* ==========================================================================
   7. How It Works Section
========================================================================== */
.how-it-works {
    background: #f5f5fa;
padding-bottom: 30px;
}

.board{
/*width: 75%;
margin: 60px auto;
margin-bottom: 0;
box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
position: relative;
/* border-bottom: 0; */
/* width: 80%; */
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;

}

.board > div.board-inner > .nav-tabs {
border: none;
}

p.narrow{
width: 60%;
margin: 10px auto;
}

.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
/* background-color: #ffffff; */
border: 0;
border-bottom-color: transparent;
outline: 0;
}

span.round-tabs{
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}

span.round-tabs.one{
border: 2px solid #ddd;
color: #ddd;
}

li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
background: #0072c6 !important;
border: 2px solid #0072c6;
color: #fff;
}

span.round-tabs.two{
border: 2px solid #ddd;
color: #ddd;
}

span.round-tabs.three{
border: 2px solid #ddd;
color: #ddd;
}

span.round-tabs.four{
border: 2px solid #ddd;
color: #ddd;
}

span.round-tabs.five{
border: 2px solid #ddd;
color: #ddd;
}

.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
.nav-tabs > li {
width: 20%;
}

.nav-tabs > li a{
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}

.nav-tabs > li a:hover{
background: transparent;
}

.tab-content{
}
.tab-pane{
position: relative;
padding-top: 50px;
}

.btn-outline-rounded{
padding: 10px 40px;
margin: 20px 0;
border: 2px solid transparent;
border-radius: 25px;
}

.btn.green{
background-color:#69cb95;
/*border: 2px solid #5cb85c;*/
color: #ffffff;
}

@media( max-width : 585px ){

.board {
width: 90%;
height:auto !important;
}
span.round-tabs {
font-size:16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.tab-content .head{
font-size:20px;
}
.nav-tabs > li a {
width: 50px;
height: 50px;
line-height:50px;
}

li.active:after {
content: " ";
position: absolute;
left: 35%;
}

.btn-outline-rounded {
padding:12px 20px;
}
}
<div class="row">
<div class="col-md-12 board">
    <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
    <div class="board-inner">
        <ul class="nav nav-tabs" id="myTab">
            <div class="liner"></div>
            <li class="active">
                <a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
                    <span class="round-tabs one">
                        <i class="icon icon-profile-male"></i>01
                    </span>
                </a>
            </li>
            <li>
                <a href="#" aria-controls="profile" id="DivPatientEligibility" name="PatientEligibility" class="disabled">
                    <span class="round-tabs two">
                        <i class="icon icon-pencil"></i>02
                    </span>
                </a>
            </li>
            <li>
                <a href="#" aria-controls="prototyping" id="DivPatientDeclaration" name="PatientDeclaration" class="disabled">
                    <span class="round-tabs three">
                        <i class="icon icon-layers"></i>03
                    </span>
                </a>
            </li>
 </ul>
    </div>
</div>

I am attempting to design a circular navigation bar using Bootstrap. I have successfully created circular menus but am unsure how to display labels underneath those menus to provide information about each one.

I have included the CSS file and screenshots for reference.

The current layout looks like this: https://i.sstatic.net/YCkrx.png

However, I would like to add labels under the menus and have them become active, similar to this:

https://i.sstatic.net/bZTAQ.png

How can I achieve this?

Answer №1

Inserting any tag such as h4 within the span tag will allow you to display your answer with an active color.

To see a demo, you can visit this CodePen link

/* ==========================================================================
   7. How It Works Section
========================================================================== */
.how-it-works {
    background: #f5f5fa;
padding-bottom: 30px;
}

.board{
/*width: 75%;
margin: 60px auto;
margin-bottom: 0;
box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
position: relative;
/* border-bottom: 0; */
/* width: 80%; */
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;

}

.board > div.board-inner > .nav-tabs {
border: none;
}

p.narrow{
width: 60%;
margin: 10px auto;
}

.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;<r></r>
cursor: default;<r></r>
/* background-color: #ffffff; */<r></r>
border: 0;<r></r>
border-bottom-color: transparent;<r></r>
outline: 0;<r></r>
}

<span.round-tabs{<r></r>
width: 70px;<r></r>
height: 70px;<r></r>
line-height: 70px;<r></r>
display: inline-block;<r></r>
border-radius: 100px;<r></r>
background: white;<r></r>
z-index: 2;<r></r>
position: absolute;<r></r>
left: 0;<r></r>
text-align: center;<r></r>
font-size: 25px;<r></r>
}

@media( max-width : 585px ){<r></r>
.board {<r></r>
width: 90%;<r></r>
height:auto !important;<r></r>
}<r></r>
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><r></r>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><r></r>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><r></r>
<div class="row"><r></r>
<div class="col-md-12 board"><r></r>
    <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>--><r></r>
    <div class="board-inner"><r></r>
        <ul class="nav nav-tabs" id="myTab"><r></r>
            <div class="liner"></div><r></r>
       </ul><r></r>
    </div>
</div>

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

What is the best way to adjust the size of the footer container?

Utilizing Bootstrap to practice coding as a beginner has been a learning process for me. Recently, I encountered an issue with the container size of the footer. view image description here Upon inspecting the photo in the link, I realized that the foote ...

Arranging images in a row with the help of :before and :after styling

Looking to use the pseudo selectors :before and :after to create a border around a div with images, but running into some issues. The :after image is not positioning correctly on the right side of the element and the text is dropping below the image. Check ...

Create an interactive quiz using JQuery that focuses on sorting and organizing

Hey there, I need some advice on creating a quiz for ordering and sorting in HTML5/JQuery. Basically, I want to display a random set of steps on the page that users have to organize correctly. I found an example using jQuery and jquery-ui-1.8.5.custom.min. ...

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

What is the best way to convert user input text into a JSON request?

How can I utilize the text entered inside an input field for a JSON request? $("document").ready(function() { var search = $('#input').val() var api = "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&a ...

I am looking to verify a time input using Joi

I have created a form with date and time input fields. I utilized the joi library for input validation to ensure that the date and time inputs are not left empty separately. Although I have managed to apply date validation successfully, I am facing challen ...

Limit the use of Bootstrap CSS to a single module

I've spent hours struggling with this issue. I couldn't find any online resources that address the problem I'm facing right now. :( In my current setup, I have two modules: home and admin. My home page relies on Bootstrap CSS to function pr ...

Laravel Tutorial: Utilizing for and foreach Loops to Showcase Data in Blade Template

I am trying to use a for and foreach loop to display data based on a template table. However, I am running into an issue where the else conditions always display an index of their own. My expectation is as follows: https://i.stack.imgur.com/tqDSn.png Th ...

How to use Javascript, HTML5, and AngularJS to display and print a PDF document within a

I have a situation where I need to load a Base64 encoded PDF as a String from my server into JavaScript in my client application which is built using AngularJS and HTML5. The structure of my HTML code is as follows: <div id="printablePdfContainer"> ...

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

Is there a method to measure the time it takes to download a script apart from its actual execution time

I am looking to track timing variables for my primary JavaScript load. One approach could be: <script> performance.mark('script-start') </script> <script src="something.js"></script> Later in something.js, inc ...

JavaScript event/Rails app encounters surprising outcome

I have encountered a strange bug in my JavaScript code. When I translate the page to another language by clicking on "English | Русский" using simple I18n translation, my menu buttons stop working until I reload the page. I suspect that the issue ...

Obtain random images from a sprite sheet using HTML5 canvas

Currently, the code is only displaying green asteroids from the sprite sheet, but I would like to randomly select and display red, pink, and green asteroids across the row in the game. Any assistance with this would be greatly appreciated. Here is the exi ...

Unlocking the hidden div puzzle in Bootstrap: A step-by-step guide

Currently, I am working on a website project that utilizes Bootstrap. On the right side of the page, there is a column containing a search module and various other elements. However, this column is hidden on smaller screens. I am looking to bring back only ...

Unable to properly display the message in Angular

<!DOCTYPE html> <html ng-app> <head> <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> <link rel="stylesheet" href="style.css" /> ...

Attach a button and arrow to the cursor while it is hovering

Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code. I've searched thro ...

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

Altering the color of text in hyperlinks within a list

Recently, I've started exploring CSS styling and I'm curious if there is a more effective way to change the color of link text when they are within a list. Currently, all my links have the same color and I'd like to enhance this aspect. < ...

What is the process for showing a table based on a selected value?

I could use some help - I am working on a <select> element with 4 different options in the form of <option>. What I want to achieve is to have tables that are initially not visible, and then when an option is clicked, the corresponding table wi ...

What is causing all webkit browsers to overlook the z-index in my code?

I have removed all unnecessary elements from my webpage to focus on reproducing a specific issue. HTML: <html lang="en-us"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initi ...