Even when columns are present within a Bootstrap row, there may still be a gap on the right

On my webpage, the main div is container-fluid followed by a nav. Next, I have a section where views load in with rows containing content divided into columns or offsets. However, whenever I use the row class on either the section or the div after it, it creates a gap between the nav and the page, particularly affecting the container. This seems odd given that we should only be using the container class for this purpose, while the row class is meant for columns. So why does it still generate a gap?

<div class="container-fluid ng-scope" id="page-wrapper" ng-controller="homeCtrl as ctrl">
<nav><div class="container"></div></nav>
<section>
<div ng-controller="assumeIdCtrl as ctrl" class="row ng-scope">
<div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
</div>
</div>
</section>

Answer №1

To implement a default bootstrap navigation menu, you can simply copy the code from W3C and ensure your structure is correctly set up. For example:

<nav> </nav>
<section class="container-fluid">
    <div class="row">
        <div class="col-md-6">
        </div>
        <div class="col-md-6">
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
    </div>
</section>

It's important to remember that HTML tags like div, nav, aside, section, footer, etc., act as containers by default. While using Bootstrap is great, we should also consider the default attributes of these HTML tags.

You may also want to try out the default fixed navigation in Bootstrap. I created a portfolio example using it, which you can view and inspect here:

portfolio example

The implementation is clean in terms of JavaScript (only one jQuery function if I recall correctly), with minimal custom CSS added for styling.

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

ng-repeat table grouping by date

How can I utilize *ngFor to generate an HTML table grouped by date in columns? Here is an example of a JSON List: [{ "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse A", " ...

Enhancing the display of large images on Google News for Android and iOS as a web developer

Despite having a specific XML file with articles designed for Google News and including images in the XML using the following format: <i:image> <i:loc>https://...</i:loc> <i:caption>Image description</i:caption> </i:ima ...

Diagonal-left ending div in cascading style sheets

Looking to achieve a div with a diagonal side similar to the image in the link below: https://i.sstatic.net/u9grW.png I'm trying to figure out the best way to do this. One idea is to position 2 divs closely together and rotate one of them. Alternativ ...

Is assigning an ID to multiple objects a poor decision?

While working on my Django project, the template quickly became cluttered with elements all having unique IDs. I could reduce the number of IDs by assigning them to their parent elements, but this would require longer jQuery code. So now I'm faced wit ...

Tips for organizing a grid to achieve the desired layout

Overview I am working on organizing items within the MUI Grid. The grid consists of multiple dynamic rows and columns. Each row has a fixed first column, followed by a variable number of scrollable columns. The scrollable columns should be grouped togethe ...

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

Setting up the CSS loader in a Vue.js project using webpack

I am currently working on a new vue-cli project and have successfully installed the Pure.CSS framework using npm install purecss --save. However, I am struggling to seamlessly integrate, import, or load the css framework into my project. I am unsure of whe ...

Bring to the front the div altered by a CSS3 animation

Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot ...

PHP does not provide any error when an update on a database row fails

When I try to update values retrieved from the database into a form on submission, the process fails without any error message. Below is the PHP code snippet: <?php session_start(); $username=$_SESSION['uname']; $cn=mysqli_connect("loc ...

having difficulty selecting a list item within the <nav> and <ul> tags using Selenium WebDriver

Within the nav tag, there is a list of elements. The goal is to click on the first element in the list. Below is the given HTML: <aside id="left-panel" style="overflow: visible;"> <div id="selectedBrand" class="custum-brand-info login-info"> ...

Stroke on SVG Rect disappears suddenly without explanation

My rectangle seems to be losing some of its stroke randomly, sometimes after around 50 seconds. I can't figure out why this is happening, could you help me out? Here is the link to the fiddle - http://jsfiddle.net/nhe613kt/368/ Below is the relevant ...

Different varieties of responsive calendars with built-in memos for various device displays

I developed a responsive calendar with memos for each day. Everything seems to be working fine, but only on two different screen resolutions. When viewing it on my small monitor with the resolution of 1024x768, it displays like this: https://i.sstatic.net ...

What factors does YouTube take into consideration when determining the dimensions for the generated iframe code?

Currently, I am working on a feature that allows our users to embed videos on their websites using iframe code. I want this feature to function similar to how YouTube handles it. However, I'm facing an issue where the iframe size generated by YouTube ...

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

Indent all HTML tags with Sublime Text 2's sublime indentation feature

I find the default indentation for HTML in Sublime Text 2 to be frustrating. Specifically, I dislike that it does not automatically indent the head and body tags. After reindenting everything, it ends up looking like this: <!doctype html> <html& ...

Tips for ensuring HTML5 <video> compatibility with CSP in Google Chrome

When I implement an HTML5 video element on my website with a strict Content-Security-Policy directive (default-src 'self'), I encounter an error in the Google Chrome console upon loading a page for the first time. The error message states: [Repo ...

Generate and animate several HTML elements dynamically before deleting them in a Vue2 application

When using Vue 2 (and Nuxt), I am trying to achieve a specific animation effect on button click. The animation involves a "-1" moving up a few pixels from the button and disappearing after a second. The challenge is to have multiple "-1" animations happeni ...

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

How to right-align navigation bar text using Bootstrap 4

I'm attempting to replicate Google's layout but I'm having trouble aligning the list elements to the right of the page using Bootstrap 4. I've included a link to the code I am working on, and even tried adding the classes mr-auto and ju ...