logo
down
shadow

Set Bootstrap container class to 940px max


Set Bootstrap container class to 940px max

By : Saxon
Date : November 22 2020, 04:01 AM
fixed the issue. Will look into that further according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':
code :
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container {
  min-width: 992px !important;
}
@media (min-width: 992px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

@media (min-width: 1200px) {
  .container.max-width-940 {
    max-width: 940px !important;
  }
}

.container.max-width-940 {
  min-width: 940px !important;
}


Share : facebook icon twitter icon
Twitter Bootstrap 2.2.2 row horizontal alignments and widths mixed 940px and 960px

Twitter Bootstrap 2.2.2 row horizontal alignments and widths mixed 940px and 960px


By : charllie
Date : March 29 2020, 07:55 AM
help you fix your problem This is working as expected as far as I can see. Add an inner wrapping div for the content area and apply your css to that.
code :
.inner {
  padding: 2em;
  background: rgba(150, 50, 50, 0.7);
}
why is bootstrap width limited to 940px only?

why is bootstrap width limited to 940px only?


By : Alex Katz
Date : March 29 2020, 07:55 AM
this will help I am creating a new MVC site using twitter bootstrap. but I think it is not serving the desired purpose. I want to utilize maximum screen-width but at the same time also want to use span* and offset* classes. I think, 940px is too small considering nowadays the screens are having significant large widths. How can we overcome this limitation, or should I not use bootstrap at all!! , Use fluid grid system then:
code :
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>
Bootstrap 3 - 940px width grid?

Bootstrap 3 - 940px width grid?


By : user6848699
Date : March 29 2020, 07:55 AM
will help you I am using Bootstrap 3 on a new project. The layout is to be a 940px max width (desktop etc), 12 col (60px column, 20px gutter). , Use:
code :
@media (min-width: 1200px) {
  .container {
    max-width: 970px;
  }
Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?

Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?


By : Brookey
Date : March 29 2020, 07:55 AM
this one helps. In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)
When using the Small grid use media queries to set the max-container width:
code :
.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
How do I correctly use the 960 grid system if the body container itself will be 940px?

How do I correctly use the 960 grid system if the body container itself will be 940px?


By : yumi
Date : March 29 2020, 07:55 AM
around this issue The 960 Grid uses classes from .grid_1 ... .grid_12 (max number of columns)
CSS
Related Posts Related Posts :
  • In CSS flip,TransformZ elements not on top
  • How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?
  • Setting up image sprites using 1 url in the CSS
  • bootstrap-select library using font-awsome for dropdown icon
  • Responsive SVG background / tailwindcss
  • How to remove 'clear all' button with CSS (ng-select field)
  • Why is my margin css not working in my media query?
  • CSS: 2 divs, side by side, right div gets cut off on resize
  • Cannot change the input background color when using jQueryUI datepicker
  • Level of hierarchy on CSS in a legacy application in Ruby
  • Content inside of flexbox container not displaying links inline
  • Removing underlining from certain elements inside a <u>
  • How can I repeat the same CSS elements? (scss)
  • CSS Specificity in Angular Component using /deep/ when a class is outside the component
  • How to display background color in CSS not working?
  • What is -ms-value
  • Class "Container" bootstrap not working with direction
  • What exactly happens when a browser doesn't support feature queries?
  • Div with image inside css class not showing in IE or Edge
  • How to change background color of active tab in Bootstrap without affecting other active classes
  • How would I automatically adjust the width of the dropdown content to match the width of the <p> element?
  • How to build this responsive grid with css grid
  • CodePen: How to swap these blocks in this specific order, in responsive?
  • CSS correct li order for multiple column layout
  • how to make footer not stretches to the full window size
  • Can bootstrap mix with defined CSS?
  • CSS grid equal size columns
  • mat-prefix to work on the input not the label
  • change color of ion range-slider handle
  • Numpy: sort Matrix's elements by index
  • Position two last flex items at the end oft the container
  • Center columns for the exact size(ex. tablet) in Bulma
  • Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path
  • Use svg pattern in css
  • How to make smooth zooming effect in html?
  • How can I avoid repeating elements that only change one thing in CSS?
  • how to change the size of a fixed header
  • How to make point unit align in css?
  • How can I add text-decoration to my Angular Material mat-form-field?
  • Can't get codepon accordion css-only code to work
  • CSS nav background colour change only when scrolled to first section tag
  • Have element appear in same location as another during CSS animation
  • serve_site changes CSS to its default values in blogdown
  • Please help align by button with CSS
  • Use of Bootstrap Container
  • Vertical alignment in a position-fixed div
  • bootstrap responsive images with shadow+text overlays and another overlay when hover
  • Div multiple borders for paper simulation
  • Change Location Grid
  • Div Previous Siblings is not reducing it's size
  • How do you center a text-align=left text in a table cell in angular (css table)?
  • CSS: how to align images vertically bottom
  • What things we should avoid in small screen, low bandwidth supported devices compare to big screen , high bandwidth supp
  • Float problem in IE, second floated div causes a 'clear'?
  • Using ClientBundle image resources in css urls
  • set image size with respect to the screen resolution
  • HELP Please - CSS Width Problems on IE8
  • How can I clean this CSS code; making it shorter or delete unnecessary parts (CSS perfectionist needed)
  • css not work without DOCTYPE !
  • Setting a background image in a div, position options
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org