What is the best way to display tab content next to a vertical navigation bar?

My current project involves using Vue in combination with bootstrap:

<template>
  <section>
    <div v-if="isLoading">
      <base-spinner></base-spinner>
    </div>
    <div v-else>
    <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">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
    </div>
  </section>
</template>

The above code produces the following output: https://i.sstatic.net/cTuyz.png

Currently, the tab-content is displayed below the navigation bar. Is there a way to adjust it so that the tab-content appears beside the navigation bar instead?

javascriptvue.jsbootstrap-4

Answer №1

Resolved the issue. Initially, we need to enclose them in the container class and generate two divs with the col-sm class.

Furthermore, move all the <a> tags with the nav-link class into the first col-sm div.

Lastly, shift all the tab contents into the second col-sm div.

Providing a snippet of code for reference below. Much appreciated!

<template>
  <section>
    <div v-if="isLoading">
      <base-spinner></base-spinner>
    </div>
    <div v-else style="background-color:pink;">
      <div class="container">
        <div class="row">
          <div class="col-sm">
            <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>
          <div class="col-sm">
            <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"
              >
                ...
              </div>
              <div
                class="tab-pane fade"
                id="v-pills-profile"
                role="tabpanel"
                aria-labelledby="v-pills-profile-tab"
              >
                ...
              </div>
              <div
                class="tab-pane fade"
                id="v-pills-messages"
                role="tabpanel"
                aria-labelledby="v-pills-messages-tab"
              >
                ...
              </div>
              <div
                class="tab-pane fade"
                id="v-pills-settings"
                role="tabpanel"
                aria-labelledby="v-pills-settings-tab"
              >
                ...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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 method for programming a Discord bot to respond to your messages?

As a beginner in coding, I have been working on creating a bot that can respond with whatever is said after the command !say. For example - if you type !say hello, the bot will reply with "hello". This is what I have attempted: let args = message.content ...

javascriptdiscord.js

I could use some assistance with accessing the /results page on the OMDb API following a movie search by

Presented here is my app.js code. My objective is to develop a movie search feature that enables me to look up a movie in a database and retrieve results for 10 movies related to the entered keyword. For instance, if I input "ALABAMA", the system should re ...

javascriptnode.jsexpressaxiosomdbapi

Create a grid layout using Bootstrap and Vue that features responsive columns which resemble a snake pattern. The alternate rows should be displayed in reverse order for a visually dynamic

Having a bit of a tricky situation here, hoping someone can provide some insight. I am currently working on a project using Laravel, Vue, and Bootstrap where I need to loop through some objects and display them in a specific pattern. 1 2 3 6 5 4 7 8 9 Th ...

twitter-bootstrapvue.jslayout

Is it possible to prevent users from clicking on a jQuery UI Datepicker?

Is it possible to disable the functionality of a jQuery UI Datepicker so that clicking on it does nothing but display the date? I attempted: $("#calendar").datepicker({ disabled: true, altField: '#note_date', maxDate: 0 }); Unfortu ...

javascriptjqueryjquery-uidatepickeruidatepicker

Replacing child routes with an Angular wildcard route

I'm facing an issue with integrating a module named "host" into the app-routing.module. The problem I encountered is that the wildcard route takes precedence over loading the Host component, leading to the display of the PageNotFoundComponent instead. ...

javascriptangularsingle-page-applicationangular7angular7-router

Does AngularJS utilize data binding based on a specific time frame?

I have already checked out the solution here: My question is about Angular's $digest cycle - when does it decide to run? Whenever I modify a property in the $scope, the change seems instant. Is this due to some sort of dirty-checking mechanism that o ...

javascriptangularjsdata-binding

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

javascriptjqueryajax

Is it feasible to animate a JQuery slider?

Is there a way to animate the slider using jQuery? I want to be able to press a button and have the inner part of the slider move slower (e.g. 300ms) without reacting to mouse clicks and slides. Here is the code: http://jsfiddle.net/gm4tG/5/ HTML: <d ...

javascriptjquerycssjquery-mobilecordova

The integration of express and cors() is malfunctioning

Currently, I am developing a React application and facing an issue while trying to make an API call to https://itunes.apple.com/search?term=jack+johnson In my project, there is a helper file named requestHelper.js with the following content : import &apo ...

javascriptnode.jsexpressreactjscors

Repeated information displayed in modal pop-ups

HTML <a class="btn" data-popup-open="popup-1" href="#">More Details</a> <div class="popup" data-popup="popup-1"> <div class="popup-inner"> <h2>Unbelievable! Check this Out! (Popup #1)</h2> ...

javascriptjqueryhtmlcss

What steps should I take to make jQuery compatible with a Greasemonkey 0.8 script on Firefox 2, without internet access on the computer?

Currently using Firefox 2.0.0.11, Greasemonkey 0.8.x, and the latest version of jQuery (1.3.2) that is compatible with Greasemonkey 0.8. Attempting to load this Userscript: // ==UserScript== // @name TEST // @include * // @require jquery. ...

javascriptjqueryuserscriptsfirefox2

A Step-by-Step Guide to Clearing JSON Cache

I'm currently utilizing jQuery to read a JSON file. However, I've encountered an issue where the old values are still being retrieved by the .get() function even after updating the file. As I continuously write and read from this file every secon ...

javascriptjqueryjson

Automatically generate <p> tags with Bootstrap in WordPress

Looking for some assistance here: I am using the_content() within my p tag, and Bootstrap is automatically generating more p tags. However, the content is not placed inside the intended p tag; it is actually inside another p. Image 1: https://i.sstatic. ...

wordpressbootstrap-4wordpress-theming

Using Selenium Webdriver to target and trigger an onclick event through a CSS selector on a flight booking

I've been running an automation test on the website . When searching for a flight, I encountered an issue where I was unable to click on a particular flight. I initially tried using Xpath but it wasn't able to locate the element when it was at th ...

javascriptselenium-webdrivercss-selectors

The YYYY-dd-mm input mask pattern is malfunctioning

Hello, I am having trouble creating a pattern for an input field in the format YYYY-mm-dd. My code is not working properly. Can someone please help me correct my code? Any assistance would be greatly appreciated. <html> <head> <title>En ...

javascriptjquery

What is the best way to only buffer specific items from an observable source and emit the rest immediately?

In this scenario, I have a stream of numbers being emitted every second. My goal is to group these numbers into arrays for a duration of 4 seconds, except when the number emitted is divisible by 5, in which case I want it to be emitted immediately without ...

javascriptangulartypescriptrxjs

Enhance precision with autofocus feature while utilizing Quasar's Q-Field validation

Currently, I am in the process of setting up a form using Quasar and implementing internal validation. The specific issue I am facing involves a group of checkboxes where the user must select at least one option. While I have successfully implemented the v ...

javascriptvue.jsquasar-frameworkquasar

Image proxy in Node.js

I am currently working on creating a proxy for images using an input URL. Although my code is set up to copy the same headers and return them to the client, I have encountered issues where the response either continues loading indefinitely or shows an er ...

javascriptimagenode.jsproxy

Design an element that stretches across two navigation bars

Currently, I have implemented two Navbars on my website as shown in the image below: https://i.stack.imgur.com/4QmyW.png I am now looking to include a banner that clearly indicates that this site is a test site. In addition, I would like to incorporate a ...

javascriptreactjstypescriptreact-bootstrap

Implement pagination for API calls within a React Component

I am trying to implement pagination for the results of an API call. The following code snippet shows how I am making the API call using Axios: apiCall() { const API = `http://www.omdbapi.com/`; axios.get(API, { params: { apikey: proces ...

javascriptreactjsrestpaginationaxios