Incorrect viewport widths in Vue Bootstrap fluid containers

I require a container that spans 100% of the available width until it reaches a specific breakpoint (max-width). Upon exploring the official documentation, I came across the responsive fluid container, which appeared to be a suitable choice.

Responsive containers are a new feature in Bootstrap v4.4. They enable you to define a container that is 100% wide (fluid) until a certain breakpoint is reached, at which point a max-width is applied.

Breakpoints table from the official documentation indicates that the md breakpoint is capped at 720px. However, in practice, the behavior is different. During my testing, I discovered that the max-width of the container-md is set to 960px if the viewport is greater than 992px.

screenshot showing the active css rule on the container-md

<b-container fluid="md">Codepen example

Am I misunderstanding the documentation? Are there any components available that offer the functionality described above?

cssvue.jsbootstrap-4bootstrap-vue

Answer №1

To find out the maximum widths for different breakpoints using the default SCSS variables, refer to the layout documentation available at

Answer №2

Ensure that you have included 

@import "~bootstrap/scss/bootstrap";
in your custom.scss file.

This solution worked for me.

 <b-container :fluid="'md'">
</b-container>

When inspecting the element, the class should be "container-md".

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

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

"Bootstrap - creating a dynamic effect with a repeating pattern overlay and vibrant background color in

I'm having trouble adding a repeating background image to my jumbotron that already has a rebecca-purple background color. I've tried multiple approaches, but can't seem to get it right. Here's the code snippet I'm working with: . ...

htmlcsstwitter-bootstrap

The menu seems to be off-center

I'm struggling to center my menu/navigation bar horizontally. I can't seem to figure out what mistake I've made or what I've forgotten. Additionally, there is right padding after my last list item. How can I get rid of it? HTML <di ...

csshtml

Obtain the in-flow position of a DOM element

alert("Incorrect (red): " + document.getElementById("target").getBoundingClientRect().top); alert("Proper (blue): " + document.getElementById("wrapper").getBoundingClientRect().top); #target { transform: translate(20px, -20px) rotateZ(20deg); backgroun ...

javascriptjquerycsspositiontransform

The inner div's CSS margin-top is causing the parent div to be pushed downwards

I am looking to move the child div downwards by 5px inside the parent div. Setting margin-top:5px; on the inner div causes both the inner and parent divs to be pushed down from the div above the parent div, rather than just moving the inner div down from t ...

csshtml

The Vue error message is indicating a problem with a missing module: `eslint/lib/ast-utils` that cannot be found

When attempting to execute eslint on my code, I encountered the following error: > vue-cli-service lint; vue-cli-service test ERROR Error: Cannot find module 'eslint/lib/ast-utils' Referenced from: /Users/username/Development/project/tests ...

vue.jseslint

Adjusting font sizes in JavaScript causes the text to resize

Within my HTML pages, I am adjusting the font size using JavaScript code like this: "document.body.style.fontSize = 100/50/20" However, whenever the font size changes, the text content on the page moves up or down accordingly. This can be disorienting for ...

javascripthtmlcssdomuiwebview

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...

cssfirefox

Display an error message when the button is clicked and the input field is left empty in a Vue 3 script setup

Hello, I am currently exploring Vue 3 and embarking on a new Vue 3 project venture. However, I seem to be encountering a challenge when it comes to displaying an error message if the button is clicked while the input field remains empty in my Vue 3 script ...

javascriptvue.jslogicvuejs3vue-script-setup

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

javascriptjqueryhtmlcssbackground

Issue arose when attempting to utilize the API key as an environmental variable within the Butter CMS library while working within the async

After migrating my website from Drupal to Vue, I decided to enhance the SEO performance by transitioning it to Nuxt. However, I am encountering difficulties in setting and utilizing a private API key as an environment variable in a component with the Butte ...

javascriptasynchronousvue.jsenvironment-variablesnuxt.js

css The issue of ul and ol elements not inheriting the padding property

https://codepen.io/unique-user123/pen/abcDeFG Why is it necessary to utilize the ul, ol, and li selectors in order to remove the default 40px left padding and 16px top and bottom margin? Can't we simply use the body selector to achieve this? <hea ...

htmlcssinheritancehtml-lists

"Create sleek and stylish forms with Bootstrap's horizontal

I am attempting to create a horizontal form in Bootstrap using the code provided in their documentation. The example they show has input boxes filling the entire column space, but for some reason this is not happening when I try it, even after copying the ...

htmlcssbootstrap-4

Error: Vue Prop is undefined and cannot be utilized within a v-for loop when using TypeScript and decorators

Hey there, I'm currently utilizing Vue along with typescript and facing an issue with props in v-for where it's not rendering anything. Check out the code snippet below for reference I've experimented with computed props, setting default va ...

typescriptvue.jsvue-componenttypescript-decorator

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

The issue of conflicting stylesheets is causing alignment and height discrepancies when using multiple icons

Is there a way to align icons from different stylesheets to have the same height? When attempting to use icons from separate stylesheets, I encountered a height issue where one icon left space at the top and bottom while another appeared correctly aligned. ...

htmlcssresponsive

Tips for ensuring compatibility of CSS in IE7 and IE8

Despite using the following styles to dynamically display alternative colors in my HTML code, I am facing compatibility issues with IE7 and IE8. Surprisingly, everything works perfectly fine on IE9 and above. It seems these styles are not supported by IE7 ...

htmlcssinternet-explorerinternet-explorer-8internet-explorer-7

What is the best way to utilize eslint in Vue components?

I'm facing an issue with my .vue file that defines a component. Other .vue files are unable to see it properly due to linter errors. I keep getting ES Lint errors like: Cannot find module '../components/LinkButton'. I have tried several st ...

javascriptvue.jsvuejs2eslint

Looking for giphy link within a v-for loop (Vue.js)

I am fetching a list of movie characters from my backend using axios and rendering them in Bootstrap cards. My objective is to search for the character's name on Giphy and use the obtained URL as the image source for each card. However, when I attemp ...

javascripttypescriptvue.jsvuejs2async-await

Exploring the vue.prototype object within a component's scope

Recently in my main.js file, I added the line: Vue.prototype.api_url = 'http://localhost' and then in one of my components called dashboard.vue I implemented the beforeRouteEnter export default { data() { return { } }, beforeRouteEnter ...

vue.jsvuejs2