Средства Bootstrap для оформления изображений

Александр Мальцев
Александр Мальцев
206K
41
Средства Bootstrap для оформления изображений
Содержание:
  1. Класс для придания изображениям гибкости
  2. Классы для изменения формы изображения и задания тени
  3. Классы для выравнивания изображений
  4. Варианты оформления изображений
  5. Комментарии

В этой статье познакомимся с классами фреймворка Bootstrap 3 и 4, предназначенными для оформления изображений.

Класс для придания изображениям гибкости

Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:

  • img-responsive в Bootstrap 3;
  • img-fluid в Bootstrap 4.

После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.

<!-- Bootstrap 3 -->
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->
<img src="..." class="img-fluid">

Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства max-width:100% и height:auto.

При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
.main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height:

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->
<img src="..." class="img-responsive" width="600">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) -->
<img src="..." class="img-fluid" width="600" height="800">

При таком сценарии изображение останется гибким, т.е. его размеры не будут превышать максимальной ширины блока, в котором оно находится.

Классы для изменения формы изображения и задания тени

В Bootstrap 3 и 4 имеются классы, с помощью которых изображение можно заключить в рамку (img-thumbnail), скруглить ему углы (в Bootstrap 3: img-rounded, в Bootstrap 4: rounded), или представить его в форме круга (в Bootstrap 3: img-circle, в Bootstrap 4: rounded-circle).

Классы фреймворка Bootstrap для изменения формы изображения
<!-- Bootstrap 3 -->
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

<!-- Bootstrap 4 -->
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="img-thumbnail">

Кроме этого, в Bootstrap 4 ещё имеются классы, с помощью которых вы можете добавить к изображению тень.

Классы фреймворка Bootstrap для изменения формы изображения
<!-- Bootstrap 4 -->
<!-- маленький размер тени -->
<img src="..." alt="..." class="shadow-sm">
<!-- средний размер тени -->
<img src="..." alt="..." class="shadow">
<!-- большой размер тени -->
<img src="..." alt="..." class="shadow-lg">

Классы для выравнивания изображений

Изменить положение изображения в Bootstrap можно с помощью утилитных классов:

  • в Bootstrap 3: pull-left, pull-right, center-block, text-left, text-center и text-right;
  • в Bootstrap 4: float-left, float-right, mx-auto d-block, text-left, text-center и text-right.

Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства float со значением left или right.

Классы Bootstrap для выравнивания изображения по левому или правому краю
<!-- Bootstrap 3 -->
<div class="clearfix">
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="..." class="pull-left">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="..." class="pull-right">
</div>

<!-- Bootstrap 4 -->
<div class="clearfix">
  <!-- выравниваем изображение по левому краю с помощью float: left -->
  <img src="..." alt="..." class="float-left">
  <!-- выравниваем изображение по правому краю с помощью float: right -->
  <img src="..." alt="..." class="float-right">
</div>

Установка изображению center-block (Bootstrap 3) или mx-auto d-block (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через margin-left: auto и margin-right: auto.

Классы Bootstrap для центрирования изображения
<!-- Bootstrap 3 -->
<img src="..." alt="..." class="center-block">

<!-- Bootstrap 4 -->
<img src="..." alt="..." class="mx-auto d-block">

Классы text-left, text-center и text-right предназначены для выравнивания изображений, которые отображаются на странице только как строчно-блочные (display: inline-block) элементы. Для этого изображение необходимо поместить в элемент, например, div и добавить к нему один из этих классов.

<!-- Bootstrap 3 и 4 -->
<!-- по левому краю -->
<div class="text-left">
  <img src="..." alt="...">
</div>
<!-- по центру -->
<div class="text-center">
  <img src="..." alt="...">
</div>
<!-- по правому краю -->
<div class="text-right">
  <img src="..." alt="...">
</div>

Варианты оформления изображений

В этом разделе рассмотрим примеры оформления изображений с помощью CSS.

1. Пример, в котором показано как можно разместить текст поверх изображения.

Оформление изображений – вариант 1
<style>
/* CSS */
.img__container {
  position: relative;
  margin: 20px auto 30px auto;
}

.img__container>img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 6px #9E9E9E;
  border: 4px solid #fff;
}

.img__description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.img__header {
  font-weight: bold;
  font-size: 1.25em;
}
</style>

<!-- HTML -->
<div class="img__container">
  <img src="image.png" class="image" alt="Описание изображения...">
  <div class="img__description">
    <div class="img__header">Заголовок для текста</div>
    Текст поверх изображения...
  </div>
</div>

В этом примере для размещения текста поверх изображения используется техника совместного использования относительного и абсолютного позиционирования. Познакомиться с методами позиционирования элементов в CSS можно в этой статье.

2. Рамка для изображения с использованием CSS-свойств border, outline и outline-offset.

Оформление изображений – вариант 2
<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  margin-bottom: 30px;
  outline: 6px dotted #fff;
  outline-offset: -3px;
  border: 8px solid #eee;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

3. Изображение, стилизованное с использованием CSS-свойств border и box-shadow.

Оформление изображений – вариант 3
<style>
/* CSS */
.image {
  display: block;
  margin: 20px auto 30px auto;
  max-width: 100%;
  height: auto;
  box-shadow: -6px 6px 0 #E0E0E0, -12px 12px 0 #BDBDBD;
  margin-bottom: 30px;
  border: 6px solid #F5F5F5;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

4. Изображение, оформленное с помощью CSS-свойств border и box-shadow.

Оформление изображений – вариант 4
<style>
/* CSS */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto 30px auto;
  border: 5px solid #fff;
  box-shadow: 0 0 10px #9e9e9e;
  border-radius: 4px;
}
</style>

<!-- HTML -->
<img src="image.png" class="image" alt="Описание изображения...">

5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.

Установка фонового изображения на весь экран
/* CSS */
html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

6. Пример, в котором элементу установим фоновое изображение.

Установка изображения в качестве фона в Bootstrap выполняется средствами CSS. Для этого используется свойство background-image или background.

<style>
/* CSS */
.page-title {
  background-image: url(bg.png);
}
</style>

<!-- HTML -->
<div class="page-title">...</div>

Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.

Комментарии:

  1. Roman
    Roman
    06.04.2021, 21:59
    Спасибо! Очень интересно и полезно! Хотелось бы послушать насчет решения нестандартных задач типовыми методами этого фреймворка. Кстати, вот что посоветуете для отображения лишь части галереи? В частности, первых двух рядов. Но что бы при нажатии на большую кнопку галерея раскрывалась вся? Мне приходит на ум открывать новую страницу, куда все изображения будут загружаться из БД. Но вот есть чуйка, что существует и более изящное решение.
    <img
    src=«https://itchief.ru/assets/uploadify/9/8/8/98872161677aa5faa52efe289f69d321s.jpg» class=«fancybox thumbnail center»>
    1. Александр
      Александр
      04.07.2020, 17:34
      Александр, спасибо за материал!
      Второй день осваиваю Bootstrap 4. Не могу в середину изображения поместить текст(
      Делаю так:
      <div class="container-fluid">
            <div class="row">
              <div class="col-12" style="padding: 0 0;">
                <img class="w-100" src="https://images.wallpaperscraft.ru/image/fon_kapli_svet_krugi_siniy_83428_1280x720.jpg" alt="">
                  <div style="width: 100; height: 100;">
                    <h1>Текст</h1>
                  </div>
              </div>
            </div>
          </div>
      Но текст оказывается под изображением. Как это исправить (желательно средствами Bootstrap)?
      1. Александр Мальцев
        Александр Мальцев
        05.07.2020, 16:21
        Привет! Для этого вам нужно использовать абсолютное позиционирование:
        <div class="container-fluid">
          <div class="row">
            <div class="col-12" style="padding: 0;">
              <img class="w-100" src="https://images.wallpaperscraft.ru/image/fon_kapli_svet_krugi_siniy_83428_1280x720.jpg" alt="">
              <div class="position-absolute text-center" style="top: 50%; left: 0; right: 0; transform: translateY(-50%);">
                <h1>Текст</h1>
              </div>
            </div>
          </div>
        </div>
        
        1. Александр
          Александр
          05.07.2020, 16:26
          Спасибо!
      2. Михаил
        Михаил
        22.08.2017, 18:18
        Добрый день! Я правильно понимаю, что «img-rounded center-block» центрует по горизонтали, а как выровнять по вертикали?
        1. Александр Мальцев
          Александр Мальцев
          23.08.2017, 17:48
          С помощью CSS Flexbox это можно выполнить следующим образом:
          <style>
          /* CSS */
          .v-center{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 400px;
          }
          </style>
          
          <!-- HTML -->
          <div class="v-center">
            <img src="img.jpg" class="img-rounded" alt="...">
          </div> 
          
        2. Cyberjo
          Cyberjo
          19.07.2017, 22:36
          Познавательная статья, спасибо!
          Интересно, а как например сделать чтоб крайние (левая и правая) при манипуляции с окном уменьшались/увеличивались, а средняя имела постоянный размер? При этом крайние не залазили не на неё, не под неё…
          1. Александр Мальцев
            Александр Мальцев
            20.07.2017, 15:43
            Для этого необходимо сделать разметку блока на CSS Flexbox.
            Например, так:
            <div style="display: flex;">
              <div style="flex: 1 1 auto;">
                <img src="http://via.placeholder.com/1000x300" style="display: block; max-width: 100%; height: auto;">
              </div>
              <div style="flex: 0 0 300px;">
                <img src="http://via.placeholder.com/1000x300" style="display: block; max-width: 100%; height: auto;">    
              </div>
              <div style="flex: 1 1 auto;">
                <img src="http://via.placeholder.com/1000x300" style="display: block; max-width: 100%; height: auto;">    
              </div>      
            </div>
            
            В этом примере ширина центрального блока будет 300px, а крайние — будут делить оставшуюся ширину.
            1. Cyberjo
              Cyberjo
              20.07.2017, 17:58
              Спасибо!
              Это так же полезно знать, но это не совсем то, задача такая. В среднем блоке элементы, форма с инпутами и кнопками. Необходимо что бы крайние элементы при определенном уменьшении экрана пропадали (пробую через сетку бутсрапа с помощью hidden), а средний блок всегда оставаясь в центре уменьшался незначительно, не сильно искажая форму внутри. Но если задать бекграунд картинку в див блоке, то она тянется вместе со всеми блоками.
              1. Cyberjo
                Cyberjo
                20.07.2017, 18:59
                Что-то типа такого:
                <div style="display: flex;">
                  <div style="flex: 1 1 auto;">
                    <img src="http://via.placeholder.com/500x500" class="pull-left" style="display: block; max-width: 100%; height: auto;">
                  </div>
                  <div>
                    <!-- Инпуты необходимо наложить на/в средний блок и при его изменении они должны оставаться на месте -->
                    <input type="text" required="required" name="текст1">
                    <input type="date" required="required" name="текст2">
                    <input type="time" required="required" name="текст3">
                    <div style="flex: 0 0 500px;">
                      <!-- если изображение убрать и в див всунуть задним фоном картинку, она станет тянутся за блоком нарушая форму -->
                      <img src="http://via.placeholder.com/500x500" style="display: block; max-width: 100%; height: auto;">
                    </div>
                  </div>
                  <div style="flex: 1 1 auto;">
                    <img src="http://via.placeholder.com/500x500" class="pull-right" style="display: block; max-width: 100%; height: auto;">
                  </div>
                </div>
                
          2. Сергей
            Сергей
            11.04.2017, 09:56
            Здравствуйте.
            Расскажите пожалуйста про адаптивные изображения на основе клиентских подсказок (Client Hints). В сети про эту технологию мало информации. Хотелось бы более подробно про это узнать. Спасибо.
            1. Александр Мальцев
              Александр Мальцев
              12.04.2017, 07:40
              Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:
              <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
              
              После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.

              Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.

              Т.е. как-то так. Жертвуя одним (процессорным временем и дисковым пространством) — вы получаете взамен что-то другое, в данном случае более быструю загрузку изображений (т.к. они будут отдаваться сервером в более оптимальном разрешении).

              Но можно получить и обратный эффект (более долгую отдачу страниц), например, если вы используете виртуальный хостинг и процессор «слабенький» (или нагружен сильно).
            2. Alex
              Alex
              03.02.2017, 07:19
              Александр, спасибо за ресурс!
              Вопрос по картинкам — у меня есть CMS, которая генерирует контент страницы, в т.ч. картинки. Там в форме редактора можно задавать для картинки класс. Можно ли как-то через это заставить картинку открываться красиво по типу lightbox? Bootstrap подключен, и разметка сайта на нем сделана.
              Сейчас как раз использую lightbox, но это не подходит, т.к. надо вручную весь сгенерированный текст дополнять в тегах картинки свойствами типа:
              data-lightbox="pic"
              1. Александр Мальцев
                Александр Мальцев
                03.02.2017, 16:42
                Спасибо, за отзыв. Попробуйте добавить после загрузки страницы, ко всем картинкам имеющим класс pic, атрибут data-lightbox.
                <script>
                $(function() {
                  $('.pic').each(function(){
                    $(this).attr('data-lightbox','pic');
                  });
                });
                </script>
                
              2. seventh
                seventh
                21.09.2016, 19:18
                Подскажите, пожалуйста, а как растянуть (и уменьшить) картинку по вертикали? Так чтобы она влезала в высоту окна браузера и не создавала полосу прокрутки.
                У меня маленькая страница, у которой ~80% высоты должно занимать изображение. Оно заведомо загружено большего размера и поэтому отображается в полный рост. Чтобы увидеть нижнюю часть приходится прокручивать. А в ширину оно вообще не ограничено — в ширь можно растягиваться сколько угодно (не достанет до краёв).
                1. Александр Мальцев
                  Александр Мальцев
                  22.09.2016, 10:56
                  Можно сделать так:
                  <!DOCTYPE html>
                  <html lang="ru">
                    <head>
                      <meta charset="utf-8">
                      <title>...</title>
                      <style>
                        html, body {
                          height: 100%;
                        }
                      </style>
                    </head>
                    <body>
                      <div style="height: 20%;"></div>
                      <div style="height: 80%; text-align: center;">
                        <img src="image.jpg" style="height: 100%; width: auto;">
                      </div>
                    </body>
                  </html>
                  
                  Т.е. добавить к изображению стили с помощью CSS или атрибута style:
                  height: 100%;
                  width: auto;
                  
                  1. Антон
                    Антон
                    04.10.2016, 02:14
                    В тему вопрос. Как сделать чтобы карусель была в окне браузера? Если использовать «height: 100%», то индикаторы все-равно не лезут.
                    1. Александр Мальцев
                      Александр Мальцев
                      05.10.2016, 12:31
                      Если правильно понял, то необходимо сделать так:
                      <body>
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height: 100%; overflow: hidden;">
                        ...
                      
                2. Сергей
                  Сергей
                  16.06.2016, 10:59
                  Здравствуйте!
                  Для разных размеров сетки Bootstrap xs, sm, md, lg надо генерировать превьюшку изображения с разными размерами по ширине. Потому что в моем случае, например, для lg достаточно 250px, а вот для xs надо уже 800px. Можно, конечно, сгенерировать превью шириной 800px, которое подойдет для разных размеров экрана, но с превью такого размера, это большой траффик и медленная скорость загрузки картинок. Как тут поступить, если для разных классов xs, sm, md, lg нужно генерировать оптимизированную превьюшку изображения?
                  1. Александр Мальцев
                    Александр Мальцев
                    16.06.2016, 12:36
                    Здравствуйте.
                    Используйте элемент picture, он поддерживается браузерами Chrome 38+, Firefox 38+, Edge 13+ (IE), Opera 25+, Safari 9.1. Он позволяет с помощью медиа-запроса настроить файл изображения.
                    <picture>
                      <source media="(min-width: 992px)" srcset="high-res-image.jpg">
                      <source media="(min-width: 768px)" srcset="mid-res-image.jpg">
                      <img src="low-res-image.jpg">
                    </picture>
                    
                    Вышеприведённый пример будет работать следующим образом:
                    — ширина экрана больше 992px — файл high-res-image.jpg
                    — ширина экрана больше 768px и меньше 992px — файл mid-res-image.jpg
                    — ширина экрана меньше 768px — файл low-res-image.jpg.

                    Так же можно использовать медиа-запросы для показа изображения через свойство CSS background.

                    Можно также организовать это через JavaScript. Т.е. написать скрипт, который будет получать разрешение экрана и плотность пикселей, обрабатывать эти сведения и зависимости от результата изменять имя изображения у элемента img.
                    1. Сергей
                      Сергей
                      17.06.2016, 18:29
                      Спасибо, за совет. То, что нужно.
                      Сайт сделан на MODX и стояла задача снизить трафик при загрузке картинок от сервера к клиенту. Думаю, так и сделаю, настрою MODX на генерацию необходимых размеров превьюшек, а показывать буду уже в зависимости от размера экрана.
                  2. Elena
                    Elena
                    06.06.2016, 11:18
                    Добрый день. Не подскажите, как быть с видео. Есть ли в Bootstrap 3 класс, отвечающий за адаптивность видео? Подскажите, где посмотреть. Спасибо.
                    1. Александр Мальцев
                      Александр Мальцев
                      07.06.2016, 13:18
                      Здравствуйте, есть.
                      Поддерживаются следующие теги: iframe, embed, video и object.
                      <!-- Соотношение 16:9 -->
                      <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="..."></iframe>
                      </div>
                      <!-- Соотношение 4:3 -->
                      <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="..."></iframe>
                      </div>
                      
                      1. Elena
                        Elena
                        08.06.2016, 11:36
                        Спасибо большое. Очень помогли. я всегда на вашем сайте находила много полезной и понятно изложенной информации. Очень помогает новичкам. спасибо за Ваш труд.
                        1. Александр Мальцев
                          Александр Мальцев
                          05.10.2016, 11:48
                          Очень приятно читать такие отзывы.
                    2. Илья
                      Илья
                      07.04.2016, 14:58
                      Столкнулся с такой проблемой на BS4. При установке класса «img-thumbnail» значение «max-width:100%» на мобильном устройстве не работает, выставляю принудительно «width:100%» — работает.
                      1. Александр Мальцев
                        Александр Мальцев
                        07.04.2016, 16:17
                        Устанавливать «width:100%» не совсем правильно. Если картинка будет меньше ширины контейнера, то он её растянет.
                        Правильно, устанавливать именно «max-width:100%».
                        Не знаю, но его поддерживают все браузеры, кроме Internet Explorer 6.
                        1. Антон
                          Антон
                          04.10.2016, 02:12
                          Привет. Не подскажешь решение проблемы?
                          Есть карусель на бутстрапе. Вверху есть меню, которое поверх фона. Если с помощью «z-index» поставить выше меню, то контролеры карусели не работают. А если ставить выше контролеры, то не работают кнопки меню, они становятся темнее.
                          1. Александр Мальцев
                            Александр Мальцев
                            05.10.2016, 11:56
                            Данную ситуацию желательно представить на jsfiddle.net. Вам необходимо правильно настроить «z-index».
                          2. Илья
                            Илья
                            15.04.2016, 13:02
                            Странно, у меня во всех браузерах не работает (хром, мозила, яндекс). Хотя смотрю через консоль — «max-width:100%» к изображению применяется.
                            И на мобильном тоже.
                        2. Андрей
                          Андрей
                          25.03.2016, 11:57
                          Привет.
                          С выводом изображения вроде разобрался. Но вот ни где не могу найти как сделать вывод текста или других элементов, например кнопок, логотипа и т.п. поверх изображения. Подскажите где копать?
                          1. Александр Мальцев
                            Александр Мальцев
                            25.03.2016, 17:17
                            Привет!
                            1. С помощью позиционирования. Изображение — relative, элемент, в которой помещено изображение — absolute.
                            CSS:
                            .image {
                              position: relative;
                            }
                            .over {
                              position: absolute;
                              left: 0;
                              top: 0;
                              width: 800px;
                              text-align: center;
                              z-index: 1000;
                            }
                            
                            HTML:
                            <div class="image">
                              <img src="img/image-800x600.jpg">
                              <div class="over">Некоторый текст, который необходимо вывести поверх изображения...</div>
                            </div>
                            
                            2. Как задний фон (background).
                            CSS:
                            .image {
                              background-image: url(img/image-800x600.jpg);
                              background-repeat: no-repeat;
                              background-position: center;
                              height: 600px;
                              width: 800px;
                              margin: 0 auto;
                              text-align: center;
                            }
                            
                            HTML:
                            <div class="image">
                              Некоторый текст, который необходимо вывести поверх изображения...
                            </div>
                            
                            1. Андрей
                              Андрей
                              05.04.2016, 21:49
                              Попробовал использовать первый вариант наложения текста, но изображение использую в колонке сетки. CSS-параметр width изменил на auto, но текст никак не могу установить по центру фото и соответственно колонки. Текст выравнивается только по левому краю. Подскажите как установить выравнивание текста по середине?
                              1. Александр Мальцев
                                Александр Мальцев
                                06.04.2016, 13:27
                                С выравниванием по центру не так всё просто, как это может показаться на первый взгляд.
                                Попробуй сделать так.
                                HTML:
                                <div class="image">
                                  <img class="img-responsive center-block" src="img/image-800x600.jpg">
                                  <div class="over">Некоторый текст, который необходимо вывести поверх изображения...</div>
                                </div>
                                
                                CSS:
                                .image {
                                  position: relative;
                                }
                                .over {
                                position: absolute;
                                  left: 50%;
                                  top: 50%;
                                  -webkit-transform: translate(-50%, -50%);
                                  -moz-transform: translate(-50%, -50%);
                                  -ms-transform: translate(-50%, -50%);
                                  -o-transform: translate(-50%, -50%);
                                  transform: translate(-50%, -50%);
                                }
                                
                                Другие варианты можешь посмотреть в статье:
                                CSS — Выравнивание по центру
                              2. Андрей
                                Андрей
                                25.03.2016, 17:51
                                Спасибо, попробую. Думал у Bootstrap это в CSS предусмотрено.
                                Кстати, нашел еще одно решение в примере с созданием сайта визитки, там вроде без правки CSS.
                            2. Сергей
                              Сергей
                              04.03.2016, 12:19
                              Большое спасибо!
                              Только я малость по-другому сделал, так как мне не все картинки нужно центровать:
                              .img-responsive {
                                display: inline-block;
                              }
                              
                              1. Сергей
                                Сергей
                                02.03.2016, 18:35
                                Всем привет!
                                Пригодился этот класс img-responsive, но столкнулся с проблемой. Выравнивание по горизонтали перестало работать. Все картинки уехали влево и никакими способами не встают по центру. Потыкав классы, понял, что это влияние стиля Bootstrap «display:block».
                                Или я что-то не так понимаю?
                                1. Александр Мальцев
                                  Александр Мальцев
                                  03.03.2016, 15:24
                                  Привет.
                                  После применения класса img-responsive, изображение отображается уже как блок. А элементы, имеющее блочные отображение, необходимо выравнивать по-другому. Всё это подробно описано в статье.
                                  Если изображения не хочешь делать блочными, то воспользуйся следующим CSS:
                                  img {
                                    display: inline-block;
                                    height: auto;
                                    max-width: 100%;
                                  }
                                  
                                2. Артур
                                  Артур
                                  27.02.2016, 19:09
                                  Огромное спасибо!
                                  Александр, у вас отличные уроки. Так разжевано всё!
                                  1. Максим Стацнко
                                    Максим Стацнко
                                    30.12.2015, 14:31
                                    Спасибо! Тоже поправил в carousel. Теперь всё по центру и rounded тоже)
                                    1. Дима
                                      Дима
                                      07.10.2015, 11:01
                                      Отлично! Большое спасибо, очень помогли, класс )
                                      Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.