I am brand new to coding and have not been able to determine why two seemingly identical pieces of code do not work the same. This exercise involves simply making a picture appear on a web page. Easy enough, but I do not see why the same code only works one out of two times.
This code works:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg"
</div>
While this code does not:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg"
</div>
I checked the source for the non-working photo and it is valid. (Check it yourself if you like ultra-cute puppies).
What am I not seeing? (besides the puppy picture, obviously).
Thanks.
You are not using the img tag, you are just writing plain text.
Change to this (notice the brackets):
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg" />
First and 2nd code snippets look the same, no reason either of them should work.
try this
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg">
</div>
or this:
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
Related
I have created a website through bolt blogger template theme which is an XML document and I have created a separate file folder called Images and put all those png images in that.
My file path is: F:\BackupTheme\BackUp1\Images
I have added these below-given HTML codes inside the theme but it still showing the broken image and I cleared all those cache memories in my chrome browser also but no luck.
My html code would be like:
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="mgn-b">
<div class="col-xs-3">
<img src="../../Images/wifi.png" class="img-responsive center-block img-p" alt="WiFi" title="WiFi"/>
</div>
<div class="col-xs-3">
<img src="../../Images/water.png" class="img-responsive center-block img-p" alt="Drinking Water" title="Drinking Water"/>
</div>
<div class="col-xs-3">
<img src="../../Images/air-conditioner.png" class="img-responsive center-block img-p" alt="Air Conditioner" title="Air Conditioner"/>
</div>
<div class="col-xs-3">
<img src="../../Images/kitchen.png" class="img-responsive center-block img-p" alt="In House Kitchen" title="In House Kitchen"/>
</div>
</div>
</div>
I'm expecting png images to be displayed but the actual result is a broken image.
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
I recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link
So I'm trying to mimic some of the look of this website:
http://quay.com.au/
Since I'm intrigued by the design. I'm wondering how to go about overlapping containers in rows using Bootstrap, since I've looked into the code and it seems like that's what they're using.
This is what I have for HTML so far:
<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
<h3>About</h3>
<p><b>Info1</b></p>
<p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
<h3>Projects</h3>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
<h3>Work</h3>
</div></div>
</div>
</div>
Any suggestions? Something to do with z-index in css is my only guess...
Looking at the code on the site the container has a position: relative and to get the sections overlapping the sections are offset from the top, like The Query Experience
.page-index .pattern-gray {
top: -240px;
}
quick bootply http://www.bootply.com/Blms3j1GjO
What you're looking for is called Parallax Scrolling. There are several tutorials out there, and a full implementation would be difficult to include in one answer here.
Here's a good resource from David Walsh on this
Basically, this is a combination of background-attachment: fixed and overlapping div elements, and some javascript to flop the selected image when it's hidden.
I hope that helps.
I'm trying to load the bootstrap media object inside a span3 div.
Everything works, apart from the image. I've checked this link elsewhere and it has no issues.
Any suggestions
<div class="container">
<div class="row">
<div class="span3">
<div class="pull-left">
<h3>Top Devices</h3>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="<?php echo base_url(); ?>resource/img/devices/Asus-Nexus-7.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
</div>
</div>
</div>
If it's just a regular image you are loading into the span3, is there a reason why you are using data-src and not src ?
Or if you are also using something like foresight.js, for example, see if this post helps you
Good luck!
Check the source code out, probably it will gives you the answer.
I think you should add an slash:
data-src="/resource/img/devices/Asus-Nexus-7.png
instead of:
data-src="resource/img/devices/Asus-Nexus-7.png
Grretings