Images not responsive by default in Twitter Bootstrap 3? - javascript

It looks like with the new version 3.0 I have to set the class names of an image to col-lg-4 col-sm-4 col-4 if the image is part of div with the same class names to make the image responsive with all breakpoints.
In version 2 the images CSS properties inherited by default the parent's div properties.
Is this correct?

Bootstrap 4
For Bootstrap 4 use Sass (SCSS):
// make images responisve by default
img {
#extend .img-fluid;
}
answer updated for version 3
Bootstrap 3 has a special class for responsive images (set max-width to 100%). This class is defined as:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Note img tag gets by default:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
So use class="img-responsive" to make your images responsive.
To make all images responsive by default:
css: add the code below under the bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
less: add the code below in your mixins.less:
img {
&:extend(.img-responsive);
}
Note: requires Less 1.4.0. see: https://stackoverflow.com/a/15573240/1596547
Carousel
img tags inside a carousel are responsive by default
Semantic rules
See also the answer of #its-me (https://stackoverflow.com/a/18653778/1596547). Using the above to make all your images responsive by default turns your images to block level elements. Block level elements are not allowed in paragraphs (<p>), see: https://stackoverflow.com/a/4291515/1596547
As far as i understand the distinction of block-level vs. inline elements is replaced with a more complex set of content categories. See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level.
So in HTML5 a p tag can contain any phrasing element intermixed with normal character data. (see: http://www.w3.org/TR/html-markup/p.html) The img tag is such a phrasing element. The img tag's default value for the display property is indeed inline-block. Changing the display property to block does not violate any of the preceding rules.
Block level elements (display:block) take all the available space of their parent, which seems exactly what you expect for responsive images. So setting display: block; seems a reasonable choice, which has to be preferred above the inline-block declaration.
Images inside p elements which require inline-block as suggest by #its-me (https://stackoverflow.com/a/18653778/1596547) should maybe not be responsive at all.

Excellent suggestion by #BassJobsen, but I'd use display: inline-block; instead of display: block; as that feels more semantic 1 (which means you can be a bit more sure you are not messing up somewhere else).
So, mine would look like this:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Please do let me know if my understanding is flawed. :)
[1]: For one, images are almost always wrapped in a block-level element if that's the use case; and then again, we also use images in elements like paragraphs (p), where an inline-block would be more appropriate than a block element.

Got here after trying to figure out if it's safe to apply img-responsive for all images.
The answer by #its_me led me to think that it isn't safe to apply this for images under a p element.
This does not seems to be what the bootstrap team think.
This is why images are not responsive by default in bootstrap3:
The summary is that it breaks a ton of unsuspecting third-party widgets (including Google Maps), which understandably don't anticipate the images within them being forcibly resized to other widths. This is why we rolled back Bootstrap v2's "images are responsive by default" approach in Bootstrap v3 in favor of an explicit .img-responsive class.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

Related

Shortening a link using HTML/JS/CSS

I am trying to change the design of the navigation on my site.
We have some products with really long names and I want to cut them short and maybe add (...) or something similar at the end.
So something like this should look like abcdefg... instead of abcdefghijklmnopqrstuvwxyz
a{
width:50px;
overflow:hidden;
}
abcdefghijklmnopqrstuvwxyz
A JS solution is welcome.
I would also like to know why the width isn't being applied?
Use white-space combined with overflow & text-overflow. And don't forget to add display: inline-block to the a element, so you can apply width to it.
a {
display: inline-block;
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
abcdefghijklmnopqrstuvwxyz
Anchors are inline elements by default and any width set on an anchor is ignored. Change the display to inline-block:
a {
width: 50px;
overflow: hidden;
display: inline-block;
}
abcdefghijklmnopqrstuvwxyz
As MDN states:
Inline elements are those which only occupy the space bounded by the
tags defining the element, instead of breaking the flow of the
content.
and...
You can change the visual presentation of an element using the CSS
display property. For example, by changing the value of display from
"inline" to "block", you can tell the browser to render the inline
element in a block box rather than an inline box, and vice versa.
Hovewer, doing this will not change the category and the content model
of the element. For example, even if the display of the span element
is changed to "block", it still would not allow to nest a div element
inside it.

Div show auto generated inline style

I have taken a 'div' element and at run time the 'div' shows some auto generated inline style. How i should stop such inline style?
<div class="Radius_Div_Square" id="UserNoteExpand"
style="overflow-x: auto; overflow-y: auto; height:4px;" sizcache="3" sizset="339;">
In code sample you can see height:4px; that i have to stop.
That inline styling must be added by some other library or framework.
You must find out what is causing that.
Or you can overwrite the height attribute with another (external) stylesheet like
#UserNoteExpand {
height: 100px !important;
}
However, the latter is quite dirty...

Is there a way to have a div tag without having a line break, or is there an alternative?

In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}​
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.

side by side divs in full width

I have problems to place N divs side by side with full browser width
I want like this. when you resize browser space between divs must stay same and divs must resize in width.
|div| |div| |div|
| div | | div | | div |
One solution would be to use percentages:
div.mydiv {
width: 33%;
display: inline-block;
}
If you do this, be careful with padding: that adds to a div's width, possibly causing overflow. This can be fixed if you support only IE >=8, by doing
div.mydiv {
width: 33%;
display: inline-block;
-moz-box-sizing: border-box; /* OMG why doesn't Firefox support this yet */
-webkit-box-sizing: border-box; /* Safari below 5.1, including 5 */
box-sizing: border-box;
}
And if you do that, there's even one more possible problem: space between the divs. This occurs because you have empty text nodes in between them, and display: inline-block thinks that's OK: elements laid out in an inline-type fashion can be interspersed with blank text nodes. To fix this, there's a pretty bad hack:
div.containerOfAllTheDivs {
font-size: 0;
}
div.mydiv {
font-size: 12px; /* or whatever */
/* plus the above stuff */
}
This makes it so that any text (e.g. whitespace) that appears inside the container is zero-sized, unless it appears inside the divs you are stacking next to each other, in which case it reverts back to 12px. As I said, a pretty bad hack. But it works.
The more general solution is the new flexbox proposal, but that is still under heavy revision: there are two outdated versions implemented in various browsers, with the latest one not being implemented in any as of today (2012-05-15). If you know your exact environment, though, this might be a good solution.
For two divs, just do (Demo):
div
{
width: 49%;
float: left;
}
For three, do (Demo):
div
{
width: 33%;
float: left;
}
If you need an arbitrary number of divs, you have two options:
If the number is determined by the server (value is coming from a database or a session or whatever), you can generate appropriate CSS on the server side. This solution is preferable.
If not, you need JavaScript to calculate the viewport's width, and assign width values accordingly to your divs.
The same thing could be achieved using CSS3 Flexible Box Style Layout with very less coding. Well it depends upon the browser you are planning to support.
Now Flexible box layout is supported only in webkit engines & mozilla
Putting this as an answer because I guess it's valid and may serve you well. 960.gs and bootstrap both provide scaffolding for layouts identical to what you want. 960.gs is just layout but if bootstrap suits you, you can customize it on their site to just get the bits that deal with layout. One caveat for bootstrap, I haven't found a way to remove the left margin on the div columns. 960.gs includes alpha and omega classes that set margin-left and margin-right to 0 respectivley. I had to add these to bootstrap when I used it.
Using one of those scaffoldings will save you a lot of time and effort. If you have to hand your code off to somebody else later or even just have somebody else working on it with you, using a scaffolding will help them work with your code too.

counteracting existing styles

I have a div with a padding, created and styled by Javascript.
This div is created on a page with the following CSS rule:
div {
width: 100%;
}
This messes up, as it changes the width of my created div to what it naturally would be PLUS its padding (so I end up with buttons outside of the div borders). I can't statically set div widths because they depend on the content. So how can I overwrite this rule and bring it back to "default width"?
You need the following CSS:
div { width: auto; }
Since the CSS rule is applied through JavaScript, which causes it to be an inline style, you may have to use !important to make sure the new rule has a higher specificity so you can overwrite the old one.
div { width: auto !important; }
Of course, it would be even better if you could just edit the JavaScript so it wouldn’t add the style to the div anymore.

Categories

Resources