Grid not stacking properly when reaching small size - html

Straight to the point...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="galary.css">
<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>image galary</title>
</head>
<body>
<!-- Nav head bar -->
<nav class="navbar navbar-default darkblue">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<div class="navbar-header">
IMGS
</div>
<div class="collapse navbar-collapse" id="buttoncollapse">
<ul class="nav navbar-nav">
<li> About us </li>
<li> contact </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Log in </li>
<li> Sign up</li>
</ul>
</div>
</div>
</nav>
<Div class="container">
<div class="jumbotron">
<h1>The Image Gallery</h1>
<p>A bunch of beautiful images </p>
</div>
</Div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1456">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
In the code above every row has 3 pictures and each row I have implemented the div class "row" however when reaching the small size each row does not take 6 columns. The first row has two pictures of 6 columns, however, the second row has one picture of 6 columns. This happens repeatedly with the 3rd row having 2 pictures of 6 columns and the 4th row have 1 picture of 6 columns.
However, when taking away the row class for each row it works perfectly fine??
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></script><link href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1456">
</div>
</div>
</div>
If someone could enlighten me that would be great.
Thanks all


Your Bootstrap CSS does not load... Please try below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="http://i.imgur.com/qK42fUu.jpg">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1435771112039-1e5b2bcad966?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439524970634-649c37a69e5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1450&h=825&fit=crop&s=bfda9916c885869b43b70738693428d9">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1434543177303-ef2cc7707e0d?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1436262513933-a0b06755c784?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439396087961-98bc12c21176?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1450">
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?dpr=2&fit=crop&fm=jpg&h=825&q=50&w=1456">
</div>
</div>
</div>
</body>
</html>


Change your Bootstrap CSS with this CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

Related

Bootstrap images not displayed in a single row

I've been trying to create few images that should be displayed in a single row.
Currently it is displayed one-by-one.
Here's my code:
# CSS:
.emblems-section {
z-index: 1;
text-align: center;
}
<header>
<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</header>

For anyone looking for the same solution, the answer is d-flex within the parent div.

<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</div>
//you have to add row after col-md-12

It is best practice that try to avoid unnecessary div or other elements in code structure. so you don't need to use col-md-12 just replace col-md-12 to row class and remove duplicate row div.
Use below code, by using this you can remove one unrequired div element, so your code looks compressed and beautiful.
<header>
<div class="container">
<div class="row emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</header>

<div class="container">
<div class="row">
<div class="col-md-12 d-flex emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
you can add d-flex class with col-md-12

Ordering columns with bootstrap 4 on mobile devices

These ordering classes are not working. What i want, is this order on mobile and tablet:
First section:
text
img
Second section:
text
img
If I now view this on mobile, the 2 image is under each other and that's not good.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>

If you want the image to appear beside the text in small (sm) and medium (md) change your code and use only sm. It will apply for sm and md. Remember that you have 12 cols, so if you use sm-12, then you are filling the 12 cols.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="mt-5 mb-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-4 order-sm-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-6 order-sm-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>

You need to use class "order-N" for mobiles and "order-md-N" for resolutions 768px+
So:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 offset-lg-2 order-sm-1 order-md-1">
<h2 class="fooldal_title">Beton tetőcserép</h2>
</div>
<div class="col-sm-12 col-md-4 order-sm-1 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/beton-tetocserep.jpg" alt="Beton tetőcserép" class="img-responsive lazyload">
</a>
</div>
</div>
</div>
</section>
<section class="my-5">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 order-2 order-md-1">
<a href="#" title="Tovább a termékekre">
<img data-src="/images/sections/keramia-tetocserep.jpg" alt="Kerámia tetőcserép" class="img-responsive lazyload">
</a>
</div>
<div class="col-sm-12 col-md-6 order-1 order-md-2">
<h2 class="fooldal_title">Kerámia tetőcserép</h2>
</div>
</div>
</div>
</section>
Also, you can use class "my-5" instead of "mt-5 mb-5".

How align horizontal items?

I want to align these elements in mobile view
I want that on mobile devices the images are on top of the text and not on the side.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-6 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-6 col-md-10 items_why">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/destination_expert.png">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/faster.png">
<span>Faster</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/transparent.png">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="/assets/img/icons/cheaper.png">
<span>Cheaper</span>
</div>
</div>
</div>
</div>

The <div>s containing <span>s should be contained in another row so they can be part of another grid within the grid.
<div class="container">
<div class="row vcenter">
<div class="col-xs-12 col-sm-12 col-md-2">
<h3>Why Us?</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-10">
<div class="row">
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/destination_expert.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Destination Expert</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/faster.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Faster</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/transparent.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Transparent</span>
</div>
<div class="col-xs-12 col-md-1">
<img src="/assets/img/icons/cheaper.png">
</div>
<div class="col-xs-12 col-md-2">
<span>Cheaper</span>
</div>
</div>
</div>
</div>
</div>
You can try it here: https://www.bootply.com/new

Is there a better way to load images onto a website other than the img tag?

I was wondering if there was a better way to load images to a HTML file other than the <img> tag. I ask this because I am building a website that has a photo gallery. This photo gallery has 48 pictures and it seems to take forever to load.
Here is my HTML code for this page:
<!--IMAGES-->
<div class="container">
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Africabound_1.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0226.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0232.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0299.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0330.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0364.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0374.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0392.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0425.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0480.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0543.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0548.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0566.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSC_0615.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0841.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0902.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0909.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0914.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0929.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0957.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN0970.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1024.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1034.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1065.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1095.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1099.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1128.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1130.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1134.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1179.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1221.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1283.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1312.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1313.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1342.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1404.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1417.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1528.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1541.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1623.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/DSCN1624.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/IMG_1836.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/IMG_1849.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 01 17 06.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 01 22 01.JPG">
</div>
</div>
</div>
<div class="row">
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 02 05 57.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 02 28 54.JPG">
</div>
</div>
<div class=" col-xs-4 col-md-4 ">
<div class="thumbnail">
<img src="AfricaPictures/Photo May 14, 03 54 52.JPG">
</div>
</div>
</div>
</div>
</body>
</html>
<head>
As you can see, this is a monstrous three-hundred and sixteen lines of code. There must be a better way and I hope you will share it with me. Thanks in advance.

The <img>-element is the one to go for.
Be aware (if not already) that photos on the web should'nt exceed something like 500kb in file size (as a rule of thumb at least). Meaning you need reduce photo-size and kick out pixels. Here is a sample website where you can do it:
http://jpeg-optimizer.com/

As per the definition of HTML, <img> tags are one way to load image. You can also use background images, figures and the sort but the end result will be the same and there must always be a container to contain the image.
There is a lot of code going on there but sadly, the end result is a bit unavoidable. If you use rendering tools, it gives you the illusion that you are not managing it but in the end, the printed result will likely be the same once the code is rendered.
For your solution, there's a away to save a few lines left and right:
You can only wrap all your bootstrap columns in one row, since they are using float rules, you will save up a bit.
Hope this helps!

Bootstrap - wrong column on screen

I creating simple post list with thumbnails.
I have created this code:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
but on FullHD (1920px) I getting values for col-sm-* - why?
http://prntscr.com/an1097

This is because there is no over-riding column offset above for viewports above col-sm. Meaning that your page will display as the 6 central columns with the three column offset - even on larger screens.
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
you will need to add the following (col-md-offset-0) to each of the parent divs to prevent the offset in -md and -lg and to allow the two divs to display side by side:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">
I just tested this and it now works and displays the columns side by side - look at the code snippet in action (in full screen mode - the columns are adjacent and in the small window they stack vertically. Note that I added coloured backgrounds to demonstrate the point.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>