What is the best way to add a link to an external or local HTML document in a Bootstrap nav-pills component

Is there a way to link another webpage to my pictures navigation menu? For example, when I click on the pictures option in the menu, it should redirect me to google.com.

Using the Bootstrap 4 framework

div class="row row2">
        <div class="col-md-12">
            <ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My pictures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My music</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My files</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="https://google.com">My videos</a>
                </li>
            </ul>
        </div>
    </div>
htmlcssbootstrap-4

Answer №1

Success guaranteed :)

<div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="nav nav-tabs justify-content-center align-items-center" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#">About us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" target="_blank" href="http://bing.com">Our photos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#">Our songs</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#">Our documents</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#">Our movies</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

Answer №2

I was able to find the solution to my question using your assistance. Thank you!

HTML

<div class="row row2">
        <div class="col-md-12>
            <ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="about_me.html">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_pictures.html">My pictures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_music.html">My music</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="my_files.html">My files</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_videos.html">My videos</a>
                </li>
            </ul>
        </div>
    </div>

CSS

.active {
    background-color: #39a0c9 !important;
    color: #fff !important;
}

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 add border-radius to an image while incorporating padding?

I am facing an issue with images that have white padding at the top and bottom. Please refer to the attached image. Whenever I try to apply the border-radius property to these images, the edges appear distorted. Is there a way to resolve this problem wit ...

htmlcss

What's going on with the background color? It doesn't seem

I have incorporated Bootstrap into my html code and I am attempting to modify the background color of a div when the screen resolution changes from large to medium or small. Even though I have added a class, the change does not reflect when adjusting the ...

javascriptjqueryhtmltwitter-bootstrapcss

What is the best way to create a paginator class that can navigate one page at a time using HTML and CSS?

I recently found the infusion theme online and you can check out some examples of it here There is also a live preview available here However, I am encountering difficulties in getting the paginator class to move. It seems like when one of those elements ...

javascriptjqueryhtmlcsspagination

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

htmlcssformstextinput

Error: Unable to modify the div content - Uncaught TypeError: Unable to assign value to innerHTML of null

Attempting to update the contents of a div using JavaScript and innerHTML, but encountering an issue. After implementing the code to change the div's content, the functionality stopped working. The syntax has been double-checked. Tools being used in ...

javascriptjqueryhtmldom

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

I am currently working on a website layout that involves displaying one image per section. My goal is to have the images positioned on either side of the text when viewed on a larger screen, as shown in the example below: https://i.sstatic.net/bms6S.png ...

javascripthtmlreactjsbootstrap-5responsive-images

"Utilizing the ng-class directive in AngularJS to apply multiple

I have been attempting to utilize the ng-class directive in AngularJS based on a certain condition: if a JSON value is 1, it should display as green; if it's 2, red; and if it's 0, white. However, I am unable to achieve the desired result for som ...

cssangularjs

Display PDF on a separate tab when button is clicked in HTML

Is there a way to open a PDF in a new tab or window when a button is clicked? I've tried using onclick="window.location.href" but it always opens the PDF in the same page. Here's my code: <input type="button" value="Report" onclick="location ...

htmljsp

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...

htmlxmlxpath

What is the best way to access the CSS font-size property using JavaScript?

I've attempted to adjust the font size using this code: document.getElementById("foo").style.fontSize Unfortunately, this code does not return any results. The CSS styles are all defined within the same document and are not in an external stylesheet ...

javascripthtmlcss

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

htmlcssalignment

Fluid background images frame the header on either side, with a void of background in the center

I am in need of a header that spans the entire width and is divided into 3 columns, with background images only in the 1st and 3rd columns. Cross-browser compatibility is crucial for this solution. The first column should have a background image and be ...

htmlcss

ExpressJS/EJS autofocus problem with trix

As I work on setting up my blog using NodeJS/Express, I've encountered an issue with the Trix editor while trying to edit a post. The rich text area of the Trix editor automatically focuses, preventing any edits in other text areas on the page. Below ...

htmlnode.jsexpressejstrix

Why is my data not being saved to the database when using eloquent?

I am encountering an issue with my form submission. Although the data is present when using dd() on Requests, the save() function does not work as expected, resulting in the data not being stored in the table. I am attempting to add new Users via a backoff ...

phphtmllaraveleloquentlaravel-7

"Strategies for selecting the initial child element of the currently active item within a diverse array of car

My carousel slides one item at a time, and I am cloning the items. I am trying to add the "selected" class to the first child of the active class. I originally used https://www.bootply.com/HNtK6pWwFp#, but have since converted it for bootstrap 4. I attem ...

jquerybootstrap-4

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

htmlcss

Why is the bootstrap modal not showing up when editing the data?

I am currently working on a Blazor application with .NET Core 7. I am facing an issue where the Bootstrap modal does not display as active when clicking the edit button. When trying to edit data using the Bootstrap modal, the modal does not display as act ...

jquerycssbootstrap-modalbootstrap-5blazor-server-side

What is the best way to modify the color of a button within an AngularJS function by utilizing the same button?

Currently, I have a function assigned to the ng-click event on a button in order to filter a list. My goal is to change the color of the button once it has been clicked and the filtered list is displayed. I am looking for a way to achieve this within the ...

htmlcssangularjs

Creating a text gradient in CSS with a see-through background

Picture for Inspiration Example of HTML Design <div class="Heading"> Raffle <span>EXTRAVAGANZA</span> </div> Tips While not required, adding a gradient would enhance the overall look. ...

htmlcss