Achieve a full-screen width container in Bootstrap 4 without using the container-fluid class

Is there a way to make the container have a 100% width using media queries so that the elements are contained in a larger screen but not contained in a small one, or vice versa? This code is just an example that used to work with Bootstrap v4 alpha 6, but it no longer works in the latest release.

Does anyone have a solution?

JSFiddle

@media screen and (max-width: 1000px) {
  container {
    width: 100%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <nav class="navbar navbar-light bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Here is a code snippet that adjusts the navbar width based on the page width. When the page width is less than 500px, the navbar spans the full width of the page. Otherwise, it maintains the standard behavior of a container class on the element. Feel free to test it by changing the page size using this jsFiddel demo link.

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

@media screen and (max-width: 1000px) {
  .container {
      padding-right:0 !important;
      padding-left:0 !important;
      max-width: initial !important;
  }
}
body{
  background:#a7b7bf !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <nav class="navbar navbar-light bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

If you always want the navbar to occupy the full width of the page, simply remove the container class from the wrapper div:

body{
  background:#a7b7bf !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <nav class="navbar navbar-light bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Answer №2

Follow these steps for achieving the desired outcome without utilizing the container-fluid class. Instead, place everything inside a container (click the "run code snippet" button and expand to full screen to observe that it spans the full width): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>

       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
                   <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Link</a>
               </li>
               <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Dropdown
                   </a>
                   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                       <a class="dropdown-item" href="#">Action</a>
                       <a class="dropdown-item" href="#">Another action</a>
                       <div class="dropdown-divider"></div>
                       <a class="dropdown-item" href="#">Something else here</a>
                   </div>
               </li>
               <li class="nav-item">
                   <a class="nav-link disabled" href="#">Disabled</a>
               </li>
           </ul>
           <form class="form-inline my-2 my-lg-0">
               <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
           </form>
       </div>
   </div>
</nav>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

Tips for adjusting the hover color of the .carousel-control-next-icon

What specific CSS property manages the hover color of the control icons ".carousel-control-next-icon" and ".carousel-control-prev-icon" in Bootstrap 4 carousel? ...

bootstrap-4controlscarousel

Form tag definitions are missing on the login page

Here is a snippet of code I am using: <%= form_tag :action => 'process_login'%> Username: <%= text_field "user", "fullname" %>&#x00A; Password: <%= password_field "user", "password" %>&#x00A; <%= submit_t ...

htmlruby-on-railsruby-on-rails-3

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

When the mouse leaves, the input search will automatically change the text color to black

I'm having trouble developing a search input, as I am facing an issue and unable to find a solution. Currently, the search input is working fine; when I click on it, it expands. However, once expanded and I start typing, the text color turns white wh ...

htmlcss

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

htmlcssreactjs

How to perfectly position a column using CSS

Looking to align columns in a table based on a class on the header? Consider the example below: <table> <thead> <th>Name</th> <th class="price">Price</th> </thead> <tbody> ...

htmlcssweb

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

PHP: Locate a class within an HTML element using a regular expression

I have a question about customizing my HTML ul menu with submenus. Specifically, I am looking to dynamically add a "first-item" class to the first item within the submenu using PHP. <ul id="menu-main" class="menu"> <li id="menu-item-68" class=" ...

phphtmlregex

Is there a way to override the padding of a container?

Working with Wordpress for the first time has been quite a challenge. Adjusting to everything is causing me some major headaches. So, I've got this container div and added a lazy 10px padding. However, for the theme I'm attempting to develop, I ...

csshtmlpadding

AngularJS functionality ceases to function once additional HTML content is injected using AJAX

Upon loading the page for the first time, my angular functions perfectly. However, when I attempt to use the same functionality after loading my html via ajax, it does not work at all. There are no relevant errors visible in the console. Javascript: var ...

javascriptjqueryhtmlangularjsajax

What is the best way to adjust the size of the box while ensuring that the text remains centered inside it

Consider the HTML snippet below: <div class='title'><h2>Title</h2></div> I attempted to adjust the size of the box with the following CSS: .title { display: block; border-radius: 12px; border: 1px solid; } The resultin ...

htmlcss

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

cssangularsass

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

javascripthtmlcssperformancetracker

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

javascriptjqueryhtmlcss

Toggle the submit button using jQuery based on the comparison of the jml_automatic field with the id_km field

I recently learned jQuery last month, and now I am working on a form using jQuery to allow users to input gas requests. However, the script is not working to compare the values from #jml_km with #id_km, and the submit button is still not disabled when the ...

javascriptphphtmljquerybutton

What is the best way to connect an external CSS file to an HTML file in Pycharm?

Within the project directory, I've placed both the HTML and CSS files in the 'venv' library root folder. The HTML file is named index.html The CSS file is named styles.css This is the code snippet I used to link the CSS: <link rel=" ...

pythonhtmlcsspycharm

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

htmlcss

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

htmlcss

Techniques for preventing background layering using CSS

I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...

iphonecsssafarifirefox4