In bootstrap css how does one fit an image or video automatically to all mobile devices based on its Resolution.
For images, use Bootstrap's Responsive Images functionality. For video or embedded content, use Bootstrap's Responsive Embed to preserve the aspect ratio.
Example (JS Fiddle):
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/%C3%84lvkarleby_June_2013.jpg/800px-%C3%84lvkarleby_June_2013.jpg" class="img-responsive">
<hr>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="responsive-embed" src="https://www.youtube.com/embed/SirRu8mf3II" >
</iframe>
</div>
Related
I am hoping this is the correct SE forum for this question. I'd like to know what CSS can be used to stack photographs (bunch of img tags) so that they're auto-adjusted in width and height on every device screen size. An example is here: www.edwardkb.com/places/ but it's a SquareSpace template so I don't what script or CSS they use. Thank you!
if you use bootstrap 3 , just add img-responsive class in your img tag
<img class="img-responsive" src="...">
if you use bootstrap 4, add img-fluid class in your img tag
<img class="img-fluid" src="...">
can we make some images unresponsive i.e. no effect of resizing of browser window in a bootstrap responsive site?
I can't find any help?
Images in Twiiter Bootstrap are not responsive unless appended with the class img-responsive so just remove that class from the img tag and the image will not be responsive.
RESPONSIVE:
<img src="someImage.jpg" class="img-responsive" alt="image" />
NON-RESPONSIVE:
<img src="someImage.jpg" alt="image" />
I'm having trouble centering the embedded bandcamp player on my webpage. Here's what I'm trying;
<div class="embed-responsive embed-responsive-4by3">
<iframe style="margin:0 auto" class="embed-responsive-item" src="https://bandcamp.com/EmbeddedPlayer/album=2135428685/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless></iframe>
</div>
I've tried a few different style parameters (display:block, auto, etc.), and had no luck. The player is locked to the left side of the div.
This is not an issue with the YouTube or Soundcloud embedded players. I use the same code as above, but leave out the style="" section.
Are there any built in css classes in jQuery Mobile for horizontal positioning? In Bootstrap, the screen is divided by 12 columns, and elements can be aligned based on them. Example: "col-md-2". http://getbootstrap.com/examples/grid/
I want it to be fairly responsive in design. At the moment I'm thinking of using divs and set the "css width" to a percentage..
Take a look at jquerymobile responsive grids: link
code:
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a">Column A</div>
<div class="ui-block-b">Column B</div>
<div class="ui-block-c">Column C</div>
</div>
i use bootstrap for fluid grid system.
i have a div with class .span6 and i set heigth:200px for this.
now i want when window is re-sizing the div's height decrease like as width.
http://jsfiddle.net/prince4prodigy/X8zu8/
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
That depends what will be in the divs and how the site is designed...
If you just want to decrease the size than you have to make it via JS, or start positioning your elements absolute.
If the site is designed to be 100% height of the window, you can make the elements absolute and it will be easy.
But if the site isn't 100% of the window height, than the only solution is via javscript.
I don't understand why to use JS. On window re-sizing, i would probably prefer media querys for the div's.