HTML CSS: компонент боковой страницы

Какое правильное имя веб-компонента для этого? Это карта, подпись? И есть ли в CSS Bootrap компонент для этого? Наши клиенты хотят создать веб-компонент, как показано ниже. Изображение с описанием заголовка.

html css twitter-bootstrap

09.07.2019 05:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

    Use this

    <div class = "media">
      <img src = "img.png" class = "align-self-center mr-3" style = "width:60px">
      <div class = "media-body">
        <h4>Title</h4>
        <p>use this </p>

      </div>
    </div>



or


<div class = "col-md-6">
  <div class = "col-md-3">
   <img src = "">
  </div>
  <div class = "col-md-3">
  <h2 class = "bg-secondary text-white">title</h2>
  </div>
</div>

который ставит заголовок внизу и даже не отвечает на вопрос

— 09.07.2019 05:47

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

— 09.07.2019 05:50

w3schools.com/bootstrap4/…

— 09.07.2019 05:50

09.07.2019 05:39

Ответ принят как подходящий

В Bootstrap нет определенного компонента CSS, который мог бы соответствовать вашему изображению, но вы можете использовать некоторые стили CSS из Bootstrap. вы можете попробовать это и изменить CSS на стороне заголовка в соответствии с вашими требованиями.

<!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/4.3.1/css/bootstrap.min.css">
  
</head>
<body>

<div class = "container-fluid">

  <div class = "row" style = "height: 100px;" >
    <div class = "col-md-2" style = "background-color:lavender;">
    <img src = "img.png" class = "align-self-center mr-3"style = "position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
    <div class = "col-md-2" style = "background-color: #b3b2b2;text-align: center;">
    <p style = "position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);">title<p/></div>
    

</div>
</div>
</body>
</html>

его нет рядом, и он даже не отвечает на вопрос?

— 09.07.2019 10:23

09.07.2019 06:11