I am encountering an issue with the navigation bar and container layout in Bootstrap

I'm new to utilizing bootstrap and currently, I'm working on creating a navigation bar. Here is the code that I have written:

        <nav class="row navbar navbar-expand-lg navbar-light bg-white">
            <a href="#" class="navbar-brand">
                <img src="Frontend/Images/Logo.png" alt="Logo" >
            </a>
            <button 
                class="navbar-toggler navbar-toggler-right"
                type="button"
                data-toggle="collapse"
                data-target="#navb"
            >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navb">
                <ul class="navbar-nav">
                    <li class="nav-item mx-md-2">
                        <a href="#" class="nav-link active">Home</a>
                    </li>
                    <li class="nav-item mx-md-2">
                        <a href="#" class="nav-link">Paket Travel</a>
                    </li>
                    <li class="nav-item mx-md-2">
                        <a href="#" class="nav-link">Testimonial</a>
                    </li>   
                </ul>
            </div>
        </nav>
    </div>

After implementing the code, I noticed that the buttons are not contained within the container or navbar. Can anyone point out what mistake I may have made?

htmlcssbootstrap-4

Answer №1

The navigation bar was nicely designed, but there was a small mistake in assigning the class "row" to the navigation. This caused it to expand to 100% width as shown in the image, resulting in too much empty space.

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

You initially had 

<nav class="row navbar navbar-expand-lg navbar-light bg-white">

Simply change it to 

<nav class="navbar navbar-expand-lg navbar-light bg-white">

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 incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

Module specifiers that are considered relative must always commence with either "./", "../", or just "/"

I need help with importing three.js. I have been following the documentation but I keep encountering an error message: Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/ ...

javascripthtmlthree.js

Is the script failing to retrieve the innerHTML content?

Here is a snippet of HTML code: <div id="team_players"> <h3>Players</h3> <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button> <table> <thead> <tr> ...

javascriptjqueryhtml

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

What is the best way to automatically show scrollbars when a page loads using JavaScript?

How can I make the vertical scrollbar appear as soon as the page loads using javascript? I am currently using a jquery slide toggle animation that causes the vertical scrollbar to show up because it makes the page longer. However, when the scrollbar appear ...

javascriptjqueryhtml

Verify whether the division contains any elements and does not include specific elements

I previously opened a similar thread, but with the condition that the div does not contain a second element within it. So my previous question was as follows: I have some code that looks like this: <p class="elementWrap"> <label>Phone</l ...

javascriptjqueryhtmlcss

Place the background image of the parent element relative to the child element

I am struggling to position the background image of <body> relative to one specific child <div>. <body> <div>content</div> <-- place background image of body relative to this div <div>other content</ ...

cssbackground-imagebootstrap-5

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

Is it possible to use an Ajax callback function to add a select dropdown HTML to a table

I am currently in the process of using jQuery to append some HTML with the code provided below. My main objective is to select an option based on AJAX response data and create a select dropdown menu. However, the variable scope of sOut doesn't seem to ...

javascriptjqueryhtmlajax

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

javascriptjqueryhtmlajaxxmlhttprequest

What could be causing the alignment issue with cells in Bootstrap?

I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...

htmlcssbootstrap-4

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

Ensure that the heights of various Flexbox rows are always visible within the boundaries of the browser window

Within flexbox, I've laid out three rows of boxes with varying heights. This layout ensures that the rows always align perfectly with the bottom of the browser window without any gaps. You can see the full layout on Codepen by following this link: htt ...

htmlcsssassresponsive-design

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

javascriptjqueryhtmlcss

Laravel implementation of Bootstrap Datepicker

Incorporating Laravel bootstrap and a date picker, I have encountered an issue where the todayHighlight feature is not functioning correctly. Additionally, the container aspect is also not working as intended. <link rel="stylesheet" href="https://sta ...

javascriptlaravelbootstrap-4

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

javascriptjqueryhtmlcss

How to Make a React JS Component Shift to the Next Row as the Window Shrinks

I am facing an issue with the layout of my product detail page. Currently, I have two components - an image gallery on the left and product information on the right. However, when the window size gets smaller, I want the product information component to mo ...

cssreactjs

Selective Circle Appending Techniques

I am having some issues with my bubble chart code. The data file I am working with contains instances where the GDPperCapita and/or LifeExpectancy values are either 0 or NaN, causing problems when appending circles to the chart. I would like to know if th ...

javascripthtmld3.js