I recently embarked on learning Bootstrap 4 and decided to rely more on the bootstrap classes rather than traditional CSS. I encountered an issue with having two navbars stacked on top of each other and wanting to spread out the navigation items to utilize the full width of the page by aligning them space-between. Despite tinkering with d-flex classes and experimenting with flex-box in the ul, I couldn't get it to work.
To enable all flexbox related classes to work (such as justify-content-{lg-}between), you must include the following:
d-{lg-}flex and...w-100If the first one is missing, the display property will not be set to flex and the flex properties will not take effect.
Without the second, justify-content will default to space-between, but the element won't stretch to 100% creating no space to distribute.
.text-spLeft {
margin-left: 5px;
}
.text-spRight {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="nav1">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="./images/dnowlogo.png" class="img-responsive">
</a>
...
<!-- <li class="nav-item ">
<img src="./images/dnowlogo.png" class="img-responsive">
</li> -->Note: The .line-group wrapper has been removed as it was causing layout issues with the navbar.
To begin with... One important step to remember is to include these additional lines before the bootstrap jquery code, as recommended in their official documentation on BootstrapCDN:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
In response to your query, achieving this without utilizing custom CSS seems quite challenging based on the extensive review of the documentation.
Here's a snippet of custom CSS that enables the navbar to expand horizontally across the entire page:
.navbar-nav{
width: 100%;
}
Make sure to insert this code within the <style> tags utilizing proper syntax.
Creating a responsive website, I'm looking to incorporate a feature that allows for switching between a mobile version and a standard desktop version similar to what Wikipedia does. To achieve this, I would need to reload the current HTML file but en ...
Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't se ...
Is it feasible to implement an effect on a website using CSS, JavaScript, jQuery, etc., that allows users to hover over individual letters of text and highlight each letter one at a time? This would create a 'zoom up' effect. Adding a small magni ...
Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...
One issue I am facing involves styling an inline element, specifically an <a> element. The code in question is: <a class="text></a> .text{ display:inline-block; background:red; padding:5px } The problem arises when trying to load text ...
I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...
Does anyone know how to create a Javascript function for a web report that converts table values to thousands or millions by dividing or multiplying by 1000? The issue is that each value is clickable, meaning it is wrapped in an anchor tag. Is there a wa ...
Recently, I've been experiencing slow loading times on my website . It's taking about a minute for the site to load properly, but strangely, if I click on the stop loading button, the site loads instantly. Does anyone have any insight into what ...
https://i.sstatic.net/QEJsY.pngThe <th> elements are arranged on top of each other, while the <td> elements follow the same pattern. I'm attempting to alternate <th> with <td> for mobile devices. Any input or suggestions would ...
Is it possible to switch the direction of the chevron symbol both left and right by triggering it? <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta n ...
Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...
I have created a panel inside a container class. The panel's CSS is as follows: .panel { width: 100%; background: url(img/launch1.png); height: 80%; background-size: cover; background-position: center; position: relative; ...
Currently, I am utilizing jquery.tablesorter for table sorting functionality. However, I have a desire to apply a pattern to my table headers using a background-image. Unfortunately, when I do so, the .headerSortUp and .headerSortDown classes on the sorted ...
Recently, I attempted to utilize some of the particle designs featured on this website https://speckyboy.com/particle-animation-code-snippets/, but encountered difficulties. I have included both the stylesheet and javascript files, yet the design does not ...
Currently, I'm utilizing a jumbotron element on my website and aiming to make it fluid in order to adapt and fit the entire jumbotron to the screen width. However, I seem to be facing difficulty when attempting to increase its width. Below is the cod ...
I am looking to arrange 2 links on the left and 1 on the right side below some images of various sizes. Everything in my main div is currently centered. main .about p { margin-left: 50%; transform: translateX(-50%); width: 700px; line-height: 1. ...
Is it possible to utilize the iron-iconset element to assign multiple icons from an external SVG file that contains all of my icon variations (each line representing a specific icon with its color, state, etc.)? Imagine something like this: <iron-icons ...
Is there a way to implement "border-collapse: collapse" without affecting the width of the element? The Issue: Without using the border-collapse property, the right and left borders appear bold because they are adjacent. Using the border-collapse propert ...
I'm having an issue with a Vue app I created where I need to make an element expand and collapse when a button is clicked. I want the effect to be smooth and animated, but using the <transition> tag alone isn't working as expected. The prob ...
In my Component.tsx file, I am using the following template: import {Foo} from 'external-stuff' <Foo> <p>bar</p> </Foo> The Foo component is designed to accept a className parameter. const Foo = ({className, title}) =& ...