Hey I find nowhere if I can change the default value of col-xs-12
I tried to put that but I all broken...
.col-xs-12 {
width: 600px;
}
If you are a doc where I can find the answer that will be really awesome !
Thx
Never Change Bootstrap classes if you want to change any col- class simply add one more class on same element and style that class, and your external CSS file should be loaded after bootstrap, so the css file has effect
Example:
<div class="col-xs-12 my-custom-width"></div>
<style>
.my-custom-width{
width:600px;
}
</style>
You can use it this way
<div style="max-width:"600px;margin:0 auto">
<div class="col-xs-12"></div>
</div>
OR with media queries
#media (max-width: 600px) {
.col-xs-12{
max-width:600px !important;
}
}
Related
Ok, I'm aware of media queries but they are strictly related to a certain width. Sometimes it's not convenient. Say I have bootstrap navbar with logo image and h1 in one line, like here
<nav class="navbar">
<a class="navbar-brand">LOGO</a>
<h1 class="d-inline">Long enough header</h1>
</nav>
https://jsfiddle.net/zzmaster/qno7utp0/2/
On a certain screen width it wraps into two lines. I'd prefer to hide the logo and make this process independent of the width of the second element. Ideally I think of a class of hiding priority like this
<div class="container">
<div class="prio-1">one</div>
<div class="prio-2">two</div>
<div class="prio-3">three</div>
</div>
meaning preventing line wrap by hiding less priority-objects. Is it possible?
I believe this is the solution. So as per this css
If width is more than 500px all the three prio-3, prio-2, prio-1 will be visible.
If width is between 200px and 500px both prio-2, prio-1 will be visible.
If width is less than 200px only prio-1 will be visible.
#media screen and (max-width: 500px) {
prio-3 {
display: none;
}
}
#media screen and (max-width: 200px) {
prio-2 {
display: none;
}
prio-3 {
display: none;
}
}
This is the markup of a web page I'm working on right now:
<section style="background-image: url(img/about-banner.jpg); height: 100vh; position: relative; background-size: cover;">
<div class="container" style="width: 90%;">
<div class="display-table">
<div class="table-cell" style="vertical-align: bottom;">
<div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;">
<h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text</h1>
</div>
</div>
</div>
</div>
</section>
The two main areas of interest are
<div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;"
and
<h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text
For screen sizes below 1025x I'm trying to make the font-size 5vw and margin-bottom: 30vh;
These are the media queries I put in responsive.css:
#media (max-width: 1024px) {
.header_section_fix {
font-size: 1.5vw;
}
.header_fix_links a {
margin-right: 3%;
}
.about-header {
margin-bottom: 30vh;
margin-left: -2vw;
}
.other-header-h1 {
font-size: 5vw;
}
In the above css, both .header_section_fix and .header_fix_links are working.
However the media queries for .about-header and .other-header-h1 do not work on the webpage.
Below are a few ways to isolate this issue for the fix:
Firstly get rid of all your inline styles, and put them in the external style-sheet. Your going to have a hard time getting your media queries to override inline styles.
Secondly, double check that your meta view-port is being defined properly in the head of your document.
Thirdly make sure there is no conflicts with these selectors and styles being defined elsewhere in the application. ie. If you are defining margin-top: with a selector somewhere else, then use margin-bottom: in your media queries; stuff like that (make sure you are consistent with css properties and not creating conflicts).
Fourthly, make sure your CSS is valid and there is no syntax errors. Also, try to match the order of the CSS selectors in the stylesheet with how they appear in the HTML.
Your last resort scenarios would be using !important; or enclosing in a separate, second media query instance; or rearranging where these selectors are being called in the stylesheet. These may work, but ultimately would be a reach around for some conflict.
Normal specificity rules apply.
The inline style has a higher specificity than the ruleset in the media query, so it overrides the value you want.
Move the value in the style attribute into the stylesheet.
I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen.
I created easy fiddle.
Here's a question, is there any way to override container's width inside this container?
<header>
<div class="container">
<div class="content">
</div>
<div class="well">
</div>
<div class="content">
</div>
</div>
<footer>
Here theres a simpler trick that works like a charm: https://css-tricks.com/full-width-containers-limited-width-parents/
Look for: "No calc() needed"
HTML
<header>
<div class="container">
<div class="content"></div>
<div class="well full-width"></div>
<div class="content"></div>
</div>
<footer>
CSS
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The div container has the following max-width specified in media query as default by bootstrap.
#media (min-width: 768px){
.container{
max-width:750px;
}
}
#media (min-width: 992px){
.container{
max-width:970px;
}
}
To override this add the below style in your stylesheet
// This should be added in default styles, not within media query
.container{
margin:0;
padding:0;
}
#media (min-width: 768px){
.container{
max-width:100%;
}
}
#media (min-width: 992px){
.container{
max-width:100%;
}
}
ORIGINAL + BEST PRACTICE: always move the .well outside of .container to stay idiomatic with Bootstrap.
UPDATE + IF ABOVE IS NOT AN OPTION: Given that you cannot easily modify .container styles and/or move the .well outside of .container, your best bet is JavaScript. Here I have made a script that makes .well expand as the width of the window changes.
Here is a jsFiddle
The idea is that you want a negative value for margin-left and margin-right so that .well expands across the screen.
In a previous question I was able to allow an image in one row overlap the contents below it. However, I realized that now the text and other content that is being overlapped is actually getting pushed down and ruining the format. See updated example here. In summary:
<div class="container" role="main">
<div class="row" id="overlap">
</div>
<div class="jumbotron">
<!-- this is being overlapped -->
</div>
</div>
CSS
#media (min-width: 992px) {
#overlap {
height: 70px;
}
}
How can I make sure that the contents in the .jumbotron div does not get forced down?
If you add the following CSS, the image should float overtop without pushing any contents down.
#overlap .thumbnail {
position: absolute;
z-index: 100;
}
Updated: http://www.bootply.com/120760
You can add the following styles below to make it work.
CSS
.thumbnail{
position:absolute;
z-index:100;
}
Demo
I have this lines below for a reponsive site,
I need to put "no-image" class when there is no image,
<div class="row">
<div class="column">
<img id="first" width=275 height=385 src="flower-275x385.jpg" />
<img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
</div>
</div>
<style>
.row {
width:400px ;
}
.column {
width:50% ;
}
.column img {
width:100% ;
height:auto ;
}
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ;
}
</style>
The problem is Blank image always shown as square;
Because of natural sizes of blank.png is 1x1.
It seems "height:auto" reset or ignore HTML defined sizes (275x385),
Here is a jsfiddle for examine,
How to fit it like first image without JS?
Edit: I think This can be solved only with JS manipulations: My solution, Thank you for advices below!
You can consider doing this in CSS. Have a no-image like this:
http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg
Now for all the images, give this CSS:
img {background: url("no-image.png") no-repeat center center transparent;}
So, this way, the images to be loaded will show No Image and then those with no image, show this. :) DeviantArt uses the same technique. Do check this out.
You can try:
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center ";
height:385px;
}
If i'm not misunderstanding your question, i think you can try using css property background-size .
<style>
.column img.no-image {
background:red url(image-pending.jpg) no-repeat center;
background-size:275px 385px;
}
</style>
<img id="second" class="no-image" src="blank-1x1.png" />
if you still have to write the inline style css of width&height inside the at html, doesn't it supposed to add the 'px' after the number of size you write?
for some more useful documentation, you can surf into http://www.w3schools.com :)