I need a container, such that it would take 100% aavilable width until breakpoint (max-width). After reading official docs, responsive fluid container seemed like a perfect choice.
Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100% wide (fluid) until particular breakpoint is reached at which point a max-width is applied.
Breakpoints table from official docs
which says that md breakpoint is maxed to 720px. But that behaviour is different in reality.
During testing I discovered, that container-md max-width is set to 960px if viewport is more that 992px.
screenshot of active css rule on container-md
<b-container fluid="md">reproduced Codepen
Do I not understand docs correctly? Is there components with above described functionality?
The container max-widths for the various breakpoints (assuming default SCSS vars) are listed in the layout docs at https://bootstrap-vue.js.org/docs/components/layout#grid-options
make sure you have #import "~bootstrap/scss/bootstrap"; added in your custom.scss
https://bootstrap-vue.org/docs#using-custom-bootstrap-scss
This work for me.
<b-container :fluid="'md'">
</b-container>
in inspect element it should be class="container-md"
Related
There is a lot of stuff out there on making BS3 non responsive but it all seems to focus on LESS variables. I'm using static CSS though.
http://getbootstrap.com/examples/non-responsive/
http://bigwilliam.com/turn-off-responsive-behavior-for-bootstrap-3/
Steps 1 (remove viewport) and 2 (static container width) are easy enough. But how do I set the media query breakpoints in CSS?
There's an option in Bootstrap to customize your download of Bootstrap CSS to fit your needs. If you press the link customize along Bootstrap's website, it will take you to a page that lists all the components and utilities that come included with the default download of Bootstrap CSS. You can add/remove any of these items to create a version of bootstrap that fits your particular needs.
For you case, remove the following options (Under Common CSS):
Print Media Styles
Responsive Utilities
There is also a section where you can customize and compile the LESS variables into a custom .css file. The one you could consider changing is the Media Query Breakpoints settings, but there are lots of customization options for you to browse through.
Take a look here at Bootstrap/Customize to see all the options you can change, and hopefully that will help!
set minimal width to html or body element, in that way page won't resize if browser width is less than min-width specified. but whole point using bootstrap is to easily develop responsive websites, so you are doing something terribly wrong if you want not responsive bootstrap.
html { min-width: 1000px; }
When I shrink my browser window down width wise it seems around 420px is the lowest it will let me go.
I am referring to Bootstrap 3 with no custom media queries.
Can you design responsive Bootstrap 3 for screen widths of 280px without requiring custom media queries?
Thanks.
At screen widths below 360px, top-level .col-xs-1 Bootstrap grid columns start to wrap (even though conceptually, they're supposed to never wrap). See also https://github.com/twbs/bootstrap/issues/13221
The problem can be mostly avoided by not using col-xs-1 on very small screens. Or by using custom media queries.
Read about the visible-xs,visible-md etc...
You will first understand the visible class of bootstrap which you find here...
responsiveness in twitterbootstrap
I use bootstrap responsive and either I am doing something wrong, or bootstrap is not so responsive as I would love it to be.
Below you see 4 possible states, and I would avoid the two in middle. Either everything is inline like in first case, or force bootstrap to be "mobile" like in case 4.
QUESTION Can I set minimum width in pixels on which Bootstrap will always be in this mobile look like shown in case 4?
I am using twitter bootstrap version 3
here is code responsible for navbar https://gist.github.com/andilab/c1eba569dd0b9b9ad280
case 1: OK
case 2: BAD
case 3: BAD
case 4: OK
Yep. Lots of ways to do it, but I think the easiest is to download a custom Bootstrap from http://getbootstrap.com/customize. Specifically see this note:
The navbar collapses into its vertical mobile view when the viewport
is narrower than #grid-float-breakpoint, and expands into its
horizontal non-mobile view when the viewport is at least
#grid-float-breakpoint in width. Adjust this variable in the Less
source to control when the navbar collapses/expands. The default value
is 768px (the smallest "small" or "tablet" screen).
And make that change here: http://getbootstrap.com/customize/#grid-system. In your case, you would change #grid-float-breakpoint: #screen-sm-min to #screen-md-min.
The bootstrap.css file contains #Media rules that define the min-width at which it swtiches to the mobile layout.
You shouldn't edit the bootstrap.css file directly but you could override the min-width in a custom CSS file.
The full and working solution should be focused on the resolution on which the navbar menu should be collapsed to: .
working demo http://www.bootply.com/98488 by #Skelly
The answer can be found here:
Twitter Bootstrap 3 navbar-collapse - set width to collapse
This may help.
http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
You can use responsive utilities classes.
For example in your header container you can add hidden-xs hidden-md hidden-sm and on most mobile phones and tablets your menu will be like in your case 4.
Hope this is what you were looking for.
When i use Bootstrap 3 Non-Responsive version the grid keep the responsive features for the offset on browsers lower than #media (min-width: 768px) and that make them disappear and move my layout.
I searched for the issue on the Internet but no one seems to have the problem.
I will keep looking and try to fix it.
I found the problem (I forgot to add width: 970px !important; to my style.less)
To activate Bootstrap Non-Responsive *as written on bootstrap documentation:
1.- Omit the viewport mentioned in the CSS docs
2.- Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
3.- If using navbars, remove all navbar collapsing and expanding behavior.
4.- For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
.col-xs-offset-* classes work for non-responsive offset as well.
I am using Bootstrap 3 in my WordPress theme.
Most of the site will make use of the responsive features, but for a few pages that host data visualizations I would like to force a fixed width.
How would I set this non-responsivity up?
(Would be nice if there was some sort of body class (.non-responsive) that could take precedence over the responsive features?)
There is a section in Bootstrap docs about disabling responsivness:
http://getbootstrap.com/getting-started/#disable-responsive
Steps to disable responsive views
To disable responsive features,
follow these steps.
Remove (or just don't add) the viewport <meta> mentioned in the CSS
docs
Remove the max-width on the .container for all grid tiers with
max-width: none !important; and set a regular width like width:
970px;. Be sure that this comes after the default Bootstrap CSS. You
can optionally avoid the !important with media queries or some
selector-fu.
If using navbars, undo all the navbar collapsing and
expanding behavior (this is too much to show here, so peep the
example).
For grid layouts, make use of .col-xs-* classes in addition
to or in place of the medium/large ones. Don't worry, the extra-small
device grid scales up to all resolutions, so you're set there. You'll
still need Respond.js for IE8 (since our media queries are still there
and need to be picked up). This just disables the "mobile site" of
Bootstrap.
What about this?
.non-responsive { width: 800px !important; } //or whatever width you want it to be