The vertical navigation pills in Bootstrap 4 are not functioning properly as anticipated

I've been referring to the bootstrap 4 documentation for my project.

After copying and pasting the code snippet for vertical pills, I noticed it wasn't functioning correctly.

Instead of displaying text next to the buttons, it was appearing below them, and the button pills were too wide.

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">test1</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">test2</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">test3</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">test4</div>
</div>
</html>

Check out this link for more details.

javascripthtmlcssbootstrap-4

Answer №1

Since you are utilizing Bootstrap's flexbox feature, enclosing the entire content within a parent div with the class set to nav-row is necessary to display the content horizontally next to the div containing the <a> elements.

To ensure that the div element stretches 100% by default due to the flex-column property being set, adjust the width of the child <a> elements by specifying the width on the parent nav div using the inline style attribute (e.g., setting it to 100px):

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class='nav flex-row'>
  <div class="nav flex-column nav-pills" id="v-pills-tab" style='width: 100px' role="tablist" aria-orientation="vertical">
    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
    <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
    <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
    <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">test1</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">test2</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">test3</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">test4</div>
  </div>
</div>

</html>

To add padding and spacing between elements, utilize Bootstrap's properties for spacing adjustments. Refer to the Bootstrap documentation on spacing for more information.

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

Is it possible to find and replace text within an HTML file using PHP after reading it?

I'm currently working on designing an email template and utilizing preg_replace to replace specific words in the content. Since I am new to PHP, I find myself unsure about the technical details involved. My intention is for the code to read an HTML/CS ...

phphtml

Why is my Bootstrap 4 NavBar displaying a mysterious blank space on the right?

Kindly look at the image provided. The issue of white space only appears on the full-screen webpage, not on mobile or tablet views. /**** Nav Bar elements**/ .navbar{ z-index: 1; width: 100%; margin: 0; } .navbar-default{ background-col ...

htmljquerycssbootstrap-4

Tips for aligning two TD elements with varying lengths in the same row:- Consider setting a specific width for each

Can anyone assist me in properly aligning this structure? I am looking to reduce the height of the "Todays Special" td significantly. The size of this td expands based on the content, for example, if new fruits are added. Any help in resolving this would ...

htmlcss

Issue with Zeroclipboard not copying content when initially clicked

My code is experiencing some issues where it doesn't work on the first click, but strangely works on the second click. $("#btnCopiar").on("click",function(){ var clipBoardObj = new ZeroClipboard($("#btnCopiar"), { moviePath: ".. ...

javascriptjqueryclipboardzeroclipboard

Implementing a dropdown button functionality with a click event using knockout.js

I have a button dropdown with options that functions as intended, but I am looking to remove the input circle image in the options. Is this possible? Any other ideas would be greatly appreciated! Thank you. <div class="dropdown"> <b ...

htmlbootstrap-4knockout.js

Struggling to make a basic ajax request function correctly

I've been experimenting with this code snippet in my browser's console. $.ajax({ type: 'GET', url: 'http://stackoverflow.com/', dataType: 'html', success: function() { console.log("Yes, t ...

jqueryhtmlajax

What is the consensus on utilizing a primary key as the unique identifier for an HTML element?

A common practice I follow is to match the ids of the <ul> items in my HTML list with the primary keys from the database table. However, there are concerns about exposing these primary keys. Are there more secure and efficient ways to handle this w ...

mysqlhtml

Once the data is retrieved and the old image is deleted, attempting to upload the new image still results in the old image being displayed in the Next.js application with React Query

async function fetchTour() { const response = await api.get(`/tour/${router.query.slug}`); return response.data; } const { data: tourData, isLoading, isFetching, isTourError: isError, } = useQuery(['fetchTour', router.que ...

javascriptreactjsnext.jstanstackreact-query

Using the same ID tags for dynamically generated videos in a v-for loop can lead to

I am currently in the process of uploading a video file and using v-for to generate video tags with the corresponding video URL. Each tag has an ID of "myVideo." I am aware that having duplicate IDs on a page is not allowed, so how can I ensure that the co ...

htmlvue.jsvideo

Make the height of the div the same as the size of the screen

In my Twitter Bootstrap project, I have a div element that contains content which will overflow vertically off the screen. I want the div to adjust its height to match the size of the browser window, allowing the remaining content to scroll vertically wit ...

csshtmltwitter-bootstrapheightresponsive-design

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

javascriptjqueryhtmlcss

Variations in the appearance of scrollbars on the x-axis and y-axis within a single <div> element

Let's say we have a div element like this: <div class="nav-menu"></div> I want to customize the CSS style for scrollbar using the ::scrollbar pseudo-element: .nav-menu::-webkit-scrollbar { width: 8px; background: white; ...

htmlcssscrollbaroverflow

What is preventing this button from having a border-radius?

The red border is just for visual reference. I attempted using overflow: hidden but it didn't yield the desired outcome. My goal is to achieve the same border radius as the red border. Is there something amiss in my approach? Appreciate your assistanc ...

htmlcss

Help with CSS and React - how to position text in front of an image

Currently, I am working on positioning text on top of an image and centering it within the parent div. You can see the desired design in the screenshot below: https://i.sstatic.net/NNidz.png After experimenting with code and using z-index to layer the te ...

htmlcssreactjs

Could someone provide clarification on this particular line of Apex code for me?

I'm completely new to Oracle Apex and I could use some guidance in understanding the code snippet I came across in a tutorial about app creation. After digging around, I suspect it might be JavaScript, but I'm not entirely certain. The scenario ...

javascriptoracle-apex

Having difficulty displaying data in the proper format with two-way binding

In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies i ...

htmlcssangulartypescript

JavaScript can be used to open several tabs simultaneously within a single browser window

Looking to open multiple tabs in the main browser? Check out this code snippet: function openSM() { window.open("http://www.google.com","_blank"); window.open("http://www.yahoo.com","_blank"); window.open("http://www.bing.c ...

javascripthtml

How can I incorporate margins or adjust scaling within dompdf?

After creating a PDF using dompdf with the paper size set to A6, I am experiencing issues when trying to print it on A4 and letter paper sizes. The left and top borders are being cut off. Is there a way to generate a PDF that is compatible with A4, A6, l ...

phphtmlcssmagentodompdf

Having issues with importing Highcharts Gauge using NPM and Webpack

I've integrated HighCharts into a website using vanilla JS, utilizing webpack/npm for module loading and importing. While Spline and Column charts are working perfectly fine, I encountered an issue when trying to add the standard Gauge chart (seen her ...

javascriptnpmwebpackhighcharts

Tips for inserting the <a> HTML tag into a JSON array object

I am relatively new to creating array objects and I am unsure on how to add a link within a <a> tag in a JSON file. Here is the JSON object code: powerUpList: [ { id: 8, name: 'Automate your API column type ', description: & ...

javascripthtmljquerynode.jsejs