Does anyone know what CSS class controls the width of the content area of the _Layout.cshtml and how to modify it (make it wider)?
I know it says
class="container body-content"
but I can't see how to modify it. I read it's better to modify the Site.css to override the bootstrap.css instead of modifying it directly.
Thanks.
I discovered that the default bootstrap.css is using the #media rule so it is doing different things at different resolutions which is why I was having a hard time tracking what was going on. So in my Site.css I override the behavior with my own settings like:
#media (min-width: 1920px) {
.container {
max-width: 1840px;
height: 800px;
}
and now it is the width I want.
Related
My website has a Slick-Slider which is not full screen at this moment. I want to do it full screen. So when I inspect the website I can see this code;
#media (min-width: 768px) .col-md-9 {flex: 0 0 75%;max-width: 75%;}
This code comes from Global.css which I dont have it in my theme folders.
When I change max-width to 100% on inspect slider becomes full screen when I paste this code to my css file nothing happens. How can I mport this code to my CSS?
Thanks.
Just include it normally in your CSS. Local CSS takes precedence over global CSS settings. IF you are able to, make sure that your CSS document is included after the global one.
CSS wizards, show me the light please. Trying to apply my own stylesheet (table formatting) in an MVC project but I think I'm missing something as nothing happens.
index.html:
<link rel="stylesheet" href="~/Content/mystuff.css">
BundleConfig:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/mystuff.css"));
Despite this setup, bootstrap still seems to override my own settings. Am I missing any reference? Thanks a bunch
Sometimes in a css files you have !important attribute after a property.
Like:
color:red !important;
and in this case, even if you add a new class or modify the style of html element and put for exemple
color:yellow;
the browser will override your yellow color.
try to put !important after your css property to see what it will do.
If it doesn't work, by pressing F12 key you can show the tools window and examine your html element to be sure if it takes properties of your new css file.
You must Render this bundle inside the View.
#Styles.Render("~/Content/css")
You can also use dev tools that mozilla offers and see each element in order to understand where Override can happen.
If you want to override bootstrap, use media queries (selectors). Example:
#media (min-width: 768px) {
.navbar-header {
float: right;
}
}
I'm taking advantage of the xs sm md lg columns in order to define how large the columns should be at different screen sizes. It is working fine but I would like to have more fine tuned control and define my own custom sizes.
For instance I'd like to have a col size that exists between xs and sm.
I added a col-ss class like so:
#media (min-width: 600px)
.col-ss-4 {
width: 33.33333333333333%;
}
#media (min-width: 600px)
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
And added the class like so:
<div class="col-sm-5 col-ss-4">Content Here</div>
But it seems to have no effect.
Bootstrap is a really big framework. If you're looking to change the foundational structure then you're no longer using bootstrap, which is fine. However, you'll want to modify the foundation of bootstrap by using the preprocessors like LESS and SASS. This at least allows you to keep the code modularized. Something like this could very easily be added by modifying the following.
github variables.less
github grid.less
If you're looking for an answer more specific than this, you'd be better off following a tutorial that will take you step by step.
add-xl-grid-size-option
For a time estimate, expect about 30-45 minutes your first time doing this.
You might want to try the code below. you don't minimum multiple media queries for the same min-width size. if you can use less, you had be able to copy classes.
You can customize bootstrap files using bootstrap customize
#media only screen and (min-device-width: 600px){
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
.col-ss-4 {
width: 33.33333333333333%;
}
}
Go through this page to "customize" everything bootstrap. Then you can export your results.
Bootstrap customize files here
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.