Как сверстать такой блок с помощью Bootstrap?

Question

[KiberKing]

Не получается сверстать блок как на картинке

Comments

[Rustam Bainazarov]

[Rustam Bainazarov]

Если вы без Bootstrap не можете сверстать ничего, то у меня для вас плохие новости.

[KiberKing]

Было очень интересно, но я ничего не понял

[WapSter]

KiberKing, человек говорит, что это не верстается при помощи bootstrap.

[lukoie]

Тимур Турсунбаев, человек сказал что бутстрап не верстается

Answer 1

[dicem]

Нате вам, у меня сегодня нормасное настроение

Comments

[Rustam Bainazarov]

Я вижу кастомные классы!

Ахтунг! Свёрстано не с помощью только одного великого Bootstrap!

Срочно удалите свой ответ! Это оскорбление чувств Bootstrap-верстальщиков!

Answer 2

[Антон Р.]

Я бы сделал примерно так:

(картинка лежит на слое ПОД слоем со Скидкой и иконками слева)

Comments

[WapSter]

Какой ужас. Вы совсем уже повернуты на bootstrap? Скидку и иконки нужно относительно позиционировать, а не задавать им ширину в ущерб картинке.

[Антон Р.]

Тимур Турсунбаев, так я и написал что картинка ПОД слоем с этими элементами.

[WapSter]

Антон Р., зачем им тогда ширину задавать?)

[Антон Р.]

Тимур Турсунбаев, да хз, я сам тот еще "верстальщик"

Answer 3

[Lord_Dantes]

Лол,
Как бы я сделал.
Родителю padding: 15px; display: flex;align-items: center; justify-content: center;
Далее идет дочерный элемент это родитель фотки и сама фотка.
Далее полоска можно сделать как и хр как и от фотки паддингом отвести.
Далее пешку и название телефона.
Далее родитель звезд и комментарий и внутри них сами звезды и комментарии
далее родитель цены и кнопки и там родителю автоматом выравнивание так чтобы цены была по центру кнопки и потом псевдо элементом сделать зачеркнутую цену. Там еще флексы везде поэтому))

Ухх удачи если вы не можете такое сверстать надо практировать, а не задавать вопросы на тостере.

Comments

[Антон Р.]

А почему не зачеркнуть цену через
<strike>
?

[Сергей Карвасарный]

Антон Р., ну к примеру по этому -

Тег <strike> отображает текст как перечеркнутый. Этот тег аналогичен тегу <s>, который имеет сокращенную форму записи подобно тегам <b>, <i> и <u>. В любом случае, теги <strike> и <s> осуждаются спецификацией HTML, взамен них рекомендуется использовать стили.

Использование этого тега осуждается спецификацией HTML4, валидный код получается только при использовании переходного <!DOCTYPE>. В HTML5 использование <strike> запрещено.

да и если вы используете к примеру bottstrap то уже это реализовано и надо брать от туда, зачем тогда брать огромную библиотеку и писать руками вещи которые там есть или есть но которые минимально нужно отредактировать.