Personalizing bootstrap tabs

I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border while maintaining the height equal to the text in the tab link. I've attached a reference image and code snippet showcasing what I've achieved so far for better understanding. Any suggestions or assistance would be highly appreciated. Please note: The Bootstrap version used is 5.0

<link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f617f63">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
 />
 <style>
 .categories {
  padding-top: 25px;
  background-color: #f5f6fa;

}
.categories .category__item {
  border-right: 1px solid #dcdcdc;
}
.categories .category__link {
  color: #0b1320;
  font-size: 24px;
  opacity: 0.6;
  padding: 0 34px 14px 34px;
  transition: none;
}
.categories .category__link.active {
  background: transparent;
  border: none;
  color: #000;
  opacity: 1;
  font-weight: bold;
  border-bottom: 5px solid red;
}
 </style>
  <ul
      class="nav justify-content-center nav-tabs categories"
      id="myTab"
      role="tablist"
    >
      <li class="nav-item category__item" role="presentation">
        <button
          class="nav-link category__link active"
          id="home-tab"
...
<script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad4cad6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
 ></script>

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

htmlcssbootstrap-5

Answer №1

Border ends cannot be rounded directly, but you can achieve rounded shapes using the border-radius property on an element with defined height and width.

In this particular solution, a border-radius is applied to a :after pseudo-element that sits at the bottom edge of its parent container. Note the addition of position: relative; on the parent element .categories .category__link.

.categories {
    padding-top: 25px;
    background-color: #f5f6fa;

}
.categories .category__item {
    border-right: 1px solid #dcdcdc;
}
.categories .category__link {
    color: #0b1320;
    font-size: 24px;
    opacity: 0.6;
    padding: 0 34px 14px 34px;
    transition: none;
    position: relative;
}
.categories .category__link.active {
    background: transparent;
    border: none;
    color: #000;
    opacity: 1;
    font-weight: bold;
}
.categories .category__link.active:after {
    background-color: red;
    border-radius: 5px;
    content: '';
    bottom: -1px;
    display: block;
    height: 5px;
    left: 12.5%;
    position: absolute;
    width: 75%;
}
.nav-tabs .nav-link.active {
    background-color: transparent;
}
<link
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f514f53">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<ul
  class="nav justify-content-center nav-tabs categories"
  id="myTab"
  role="tablist"
>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      link1
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link2
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      link3
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link4
    </button>
  </li>
  <li class="nav-item category__item" role="presentation">
    <button
      class="nav-link category__link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      link5
    </button>
  </li>
</ul>
<script
  src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030455e405e42">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>

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

Transitioning between pages causes a delay in loading the background

Today as I was working on my CSS, I encountered some issues. I utilized Bootstrap and Darkstrap for designing. In Darkstrap, the style for the body is body { color: #c6c6c6; background-color: #2f2f2f; } Meanwhile, in my own CSS: body { ...

httpcsstwitter-bootstrap

What steps can I take to stop my Details element from moving a nearby Div?

Within this setup, there is a div containing Details and Summaries to the left. Upon expanding the details, the text enlarges and the container moves, causing the image in the right div to shift downward. Is there a way to prevent this from happening? I ...

htmlcss

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan

What might be causing the overflow of my page width by my navbar?

I am currently working on creating a product landing page for freecodecamp, and I'm facing some issues with my navbar - the first element I need to get right. Could you help me identify what's wrong with my code? Additionally, I would like to ad ...

htmlcssresponsive-design

Enhancing speed on an extensive list without a set height/eliminating the need for virtualization

My webapp includes a feature that showcases exhibitors at an expo. The user can click on "Exhibitors" in the navigation bar to access a page displaying all the exhibitors. Each exhibitor may have different details, some of which may or may not contain data ...

javascriptjqueryhtmlcss

I am having trouble properly positioning an icon next to its corresponding text within a menu item

I'm a newcomer to the world of HTML5 + CSS3 and I'm having trouble with aligning menus, text, and icons within the menu. Here's the issue: Each line of the menu consists of an icon and a text description. The problem is that they are too clo ...

htmlcssweb

Ensure that only one menu with a specific class is open at any given time

My goal is to ensure that both menus cannot be open simultaneously. The desired behavior is as follows: When one menu is already open and you click on another, the first one should automatically close. For a better understanding of what I am trying to achi ...

javascriptjqueryhtmlcss

I believe the term for this is an inline text alignment: center, but for some reason, I am unable to make it function properly within

Can anyone help me align the "Sizes" section in the center? I've tried everything but can't seem to get it right. Any tips on what and where to insert in the code? Thanks! <form action="https://www.paypal.com/cgi-bin/webscr" method="post" ta ...

html

Troubling inconsistency in jQuery's .css function performance

I'm facing a problem with the jquery .css function. I am using it to retrieve the actual height of elements that have their height set to auto. The code I am currently using is as follows: $(this).css({ height: $(this).css("height"), width: $(this).c ...

javascriptjquerycss

Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property. Currently working on a website with promo panels display ...

htmlcssinternet-explorerxhtml

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...

csssass

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...

asp.netcssbackgroundhoverserver-side

Turn off jQuery on certain pages while keeping the styling intact?

Hey there, I'm currently in the process of developing a mobile website using jquery. I was wondering if it's possible to disable jQuery on certain pages while still retaining the styles, such as the navigation bar. The reason for wanting to disab ...

jqueryhtmlnavbar

achieving initial value to show upon page load

I'm trying to set a default value that is visible when the page loads. My goal is to have the first button always displayed by default in the "display-donation" div whenever someone visits the form. Currently, when the page loads, 10 is highlighted ...

javascriptjqueryhtml

Troubleshooting a JQuery accordion malfunction within a table

I am populating the data dynamically. However, the Accordion feature is not functioning correctly. JSFiddle link http://jsfiddle.net/aff4vL5g/360/ Please note: I am unable to modify the HTML structure. Current table Desired output The first accordio ...

javascriptjqueryhtmlcssaccordion

Conceal or reveal radio buttons according to information in a table

How can I dynamically add and remove values from a table based on radio button selections? My goal is to add the selected value to the table and hide it from the radio button list, and if the value is deleted from the table, I want to show it back in the r ...

javascriptjquerycssasp.netasp.net-mvc

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

csscss-grid

What is the best way to combine two variables from separate codes?

To calculate the total sum of the values generated from "sum1" and "sum2," and then add that sum to the class ".results-6". HTML <p class="results-4"></p> <p class="results-5"></p> <p class="results-6"></p> jQuery $( ...

jqueryhtml

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...

javascriptjqueryhtmlajax

Using jQuery to Retrieve Check Box Labels and Populate Them into Textboxes

I would like to display the name of the selected checkbox label in a textbox. If multiple checkboxes are selected, I want their labels to be separated by commas and displayed in the textbox. Please excuse my poor English. $(document).ready(function() { ...

jqueryhtmlcss