How can I forbid at col-xl-* that it stops growing for bigger monitors?
When I view it on my laptop (1280 width) and on the desktop (1920), both applys to col-xl but it's either too big on the desktop or too small on the laptop.
<div class="d-flex justify-content-center align-items-center text-center login-div ">
<div class="col-md-6 col-sm-8 col-lg-5 col-xl-3 col-10 rounded-10 mask"></div>
</div>
Thanks.
One option is to use media queries and define a max-width, probably for Bootstrap's xl breakpoint:
#media (min-width: 1200px) { /* xl */
.your-class {
background: yellow;
max-width: 200px;
}
}
<div class="your-class">Hello</div>
Using the above code, elements with class .your-class will have a maximum width of 200px if the viewport width is at least 1200px.
Related
Regarding Bootstrap 4:
i was trying to collapse .card div on mobile view only.
i tried .collapse class but in this way it collapses on all sizes of screen. here are my codes in case if somebody wants to see;
<div class="col-lg-3">
<div class="card>
<div class="card-header">
<a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
</div>
<div class="card-body collapse" id="t10">
<div class="row ">
<div class="col-md-12>
<h4>ABC</h4>
<h5>Review: <img src="../../images/4stars.png"><br></h5>
</div>
</div>
</div>
</div>
after spending hours searching on internet, i didn't find anything probably i was using wrong search terms (as newbie), I got an idea to reverse the situation so I un-collapsed for =>992px in media query, codes as following:
#media (min-width: 992px) {
#t10.collapse { display: block; }
}
As you can see it is OK but I really want to learn the best way to collapse a div/card when screen size changes to less than 992px.
(Pardon my English. I am not Eng speaker).
Just add .dont-collapse-sm class to Your collapsible div to not disappear over 768px breakpoint.
Credits for: https://codepen.io/glebkema/pen/xryaKK (also helped me a lot!)
#media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}
Use the responsive display classes.
For example,
<div class="card-body d-none d-lg-flex" id="t10"></div>
Will hide this DIV on screen widths less that 992px.
Bootstrap 4 providing classes for responsive screen. like col-lg-* col-sm-*
So, You can try changing the display by using the bootstrap class itself.
E.g.
<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
/** your content **/
</div>
This classes will change the display property for every screens which we mentioned.
For your reference, Check the Bootstrap 4 Docs: Here
I have a bit of Razor code like this:
if (providerInfo.ProviderSpecialties.Any()) {
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
#foreach (var specialty in providerInfo.ProviderSpecialties) { if (!string.IsNullOrWhiteSpace(specialty)) {
<li>
#specialty
</li>
} }
</ul>
</div>
</div>
</div>
</div>
}
and my CSS is like this:
.specialtiesHeaderLabel {
text-align: right !important;
padding-right: 1px;
color: #c1c1c1 !important;
}
I do need the specialtiesHeaderLabel to be right aligned for most of the sizes but when I go to iPhone 5,6 portrait sizes at that point the label is staying still at right side but I want it to now be on LEFT side.
How can I tell it to do that?
bad one:
This should work for you. I also recommend you reading: Using media queries
for further explanation on media queries.
.specialtiesHeaderLabel {
text-align: right;
padding-right: 1px;
color: #c1c1c1;
}
#media (max-width: 768px) {
.specialtiesHeaderLabel {
text-align: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="row">
<label class="col-xs-12 col-sm-4 control-label specialtiesHeaderLabel">Specialties</label>
<div class="col-sm-8 col-xs-12">
<ul class="control-label resultValueLabel specialtiesValues">
<li>
Hi I'm a Specialty
</li>
</ul>
</div>
</div>
</div>
</div>
If you consider "extra-small" like bootstrap does, this means you want to affect phones with a width <= 768px. In your case, you may want to use media queries (more on bootstrap) like this :
<style>
media (max-width:768px) {
/*Css in here will only affect devices with a width of <= 768px*/
}
</style>
Use Media Queries as stated by Reddy. Basically you add the media query and type your styling for that specific size. Foe example, I want to style such that my website works on the Ipad Mini, I will use the tag #media screen and (max-width:768px){<styling here>} and start styling accordingly. If you wish to see how it will look like, right click, inspect/inspect element (depends on chrome, im assuming you are using chrome) then you toggle devices and select the device
If you think mobile first, you want the label to be left aligned and for devices larger than mobile phones, you want to be right aligned
So you need
#media (min-width: 768px ) {
.specialtiesHeaderLabel {
text-align: right !important;
}
}
this means that label will be left aligned(default value) and for for devices 768px and up will be right aligned. Note: 768px is bootstrap default small screen breakpoint, it can be any value
I would like to create on my page a really tiny left menu with bootstrap like this :
<div class="row>
<div class="col-md-1 col-sm-1 leftMenu"></div>
<div class="col-md-7 col-sm-7 main"></div>
<div class="col-md-4 col-sm-4 rightMenu"></div>
</div>
However col-md-1 is too large for my menu. I would like a width equal to 50px;
I don't find a solution to have a menu with a size inferior to the minimal column, without affect the responsive design of my page
Anyone have an answer to my problem ?
If you want to keep using Bootstrap, you could define new columns widths, e.g. 0.5 / 12 and 7.5 / 12:
col-md-0-5 | col-md-7-5 | col-md-4
col-sm-0-5 | col-sm-7-5 | col-sm-4
If you check the bootstrap.css file, you can define the new col-md-0-5 and col-md-7-5 classes as follows:
.col-md-0-5, .col-md-7-5 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.col-md-0-5, .col-md-7-5 {
float: left;
}
.col-md-0-5 {
width: 4.16666667%;
}
.col-md-7-5 {
width: 62.5%;
}
}
Just follow the same logic to define the new col-xs-0-5 and col-xs-7-5 classes.
.parentdivClass .row .col-md-1.col-sm-1.leftMenu{
/*your style*/
}
this CSS solve your problem but the responsiveness of the bootstrap will get affected for sure.
Assign width to the div
<div class="row">
<div class=" col-md-1 col-sm-1 well leftMenu " style="width:15px;"></div>
<div class="col-md-7 col-sm-7 well main "></div>
<div class="col-md-4 col-sm-4 well rightMenu "></div>
</div>
Demo
i have a solution for this and use it for my project you can make a file in sass directory with own name and add to main bootstrap sass file
first open _bootstrap.scss file and add this to last line
#import "bootstrap/my-responsive";
my-responsive is your file name
and put your custom css to that file (_my-responsive.scss) for any customize responsive size bootstrap screen like this
put your css for col-sm (small screen)
#media screen and (min-width: $screen-sm-min){ your own css }
this css just load in sm size with bootstrap standard size
for example
#media screen and (min-width: $screen-sm-min){ .leftMenu {width:20px} }
#media screen and (min-width: $screen-md-min){ .leftMenu {width:55px} }
in this case finaly you have one class with 20px width in sm screen and 55px in md screen so your responsive is ok and has your specific size
I am working on a project which is responsive till col-sm . I need that to render perfect in mobile device.
As whole project is already build up it's almost impossible for me to add col-xs-* for mobile.
Is there any jquery/scss way to make col-sm work as col-xs on mobile.
I need tablet version to open in mobile devices
Since col-sm classes (specifically widths) kick in from 768px, you can OVERRIDE Bootstrap's styling for col-sm's to mimick col-xs behaivour for lower viewports. The first thing to ensure is that you have a parent class in your project that you can use as a parent / child selector as simply writing styles like .col-sm-* {} will conflict with Bootstrap's native styling.
Let's say your body tag has a class of "page" for example, we can use #media queries to mimick what the col-xs classes do below 767px:
#media (max-width: 767px) {
.page .col-sm-3 {
width: 25%;
}
.page .col-sm-6 {
width: 50%;
}
.page .col-sm-9 {
width: 75%;
}
}
You can also use wildcards the same way Bootstrap does too:
#media (max-width: 767px) {
.page div[class^="col-sm-"] {
float: left;
}
}
Also, ensure your custom CSS file is referenced AFTER the Bootstrap one.
You could always do multiple col sizes in your code, too.
`<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>`
Here's the link for more info: http://getbootstrap.com/css/
I have a container that I'm setting to be absolutely positioned on a page because I want it to float over the background content. The problem is that the container is not 100% of the width of the screen. As a result, even though the col widths are appropriate and the content is in fact centered in the row, it appears totally off.
Any thoughts?
View code:
<div class="container home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>
CSS code:
/* NOTE adding width: 100% does NOT help */
#media only screen and (min-width : 320px) {
.home-marketing {
position: absolute;
padding-top: 65%;
}
}
#media only screen and (min-width : 768px){
.home-marketing {
position: absolute;
padding-top: 20%;
}
}
#media only screen and (min-width : 961px){
.home-marketing {
position: absolute;
padding-top:27%;
}
}
Rendered HTML
You can see that the home-marketing container is different because the computed width is 646.661926269531px, but for the navbar for example, the computed width is 970px
Why you are adding class container to absolute element?
.home-marketing{
width:100%;
}
<div class="home-marketing">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 jumbotron-marketing-wrapper">
<p class="jumbotron-marketing">Rent the gear you need to get outside</p>
<p class="jumbotron-marketing">We deliver & pickup even last minute requests</p>
<p class="jumbotron-marketing">Save money, save time, save space</p>
</div>
</div>
</div>