Нужна помощь с разметкой bootstrap-?

Question

[Евгений]

Всем привет, недавно начал изучать bootstrap и столкнулся с проблемой.
Нарисовал в пейнте картинку, что нужно сделать. В гугле ничего не нашлось (хотя скорее всего плохо искал).

В общем дано: четыре полоски, в каждой 1 колонка (иконка), затем 6 колонок (текст), затем 2 пустые колонки, и 3 колонки - изображение, которое в высоту занимает все 4 полоски. Вопрос вероятно очень нубский, но я не нашел примера для такой сетки в документации Bootstrap.
Префикс класса буду использовать col-xs, т.к. такая разметка должна отображаться на всех устройствах.

Answer 1

[Антон Шаманов]

подобные задачи решаются через вложенные row

<div class="row">
	<div class="col-9">
		<div class="row">
			<!-- Строка 1 -->
			<div class="col-2">1</div>
			<div class="col-6">6</div>
			<div class="col-2">1</div>
			<div class="col-2">1</div>
			<!-- Строка 2 -->
			<div class="col-2">1</div>
			<div class="col-6">6</div>
			<div class="col-2">1</div>
			<div class="col-2">1</div>
			<!-- Строка 3 -->
			<div class="col-2">1</div>
			<div class="col-6">6</div>
			<div class="col-2">1</div>
			<div class="col-2">1</div>
			<!-- Строка 4 -->
			<div class="col-2">1</div>
			<div class="col-6">6</div>
			<div class="col-2">1</div>
			<div class="col-2">1</div>
		</div>
	</div>
	<div class="col-3">
		<!-- картинка 3х4 -->
		<img class="h-100">
	</div>
</div>

зачем отступы тебе я так и не понял

Comments

[Евгений]

спасибо, это работает. только каждую строку пришлось обернуть в row, иначе все сьезжает.

[Антон Шаманов]

Евгений, странно, вообще ничего не должно съезжать, у тебя 4ый бутстрап?

[Евгений]

Антон Шаманов, 3.3.7

[Антон Шаманов]

Евгений, понятно, я на 4ую версию перешел.

Answer 2

[Markusan]

Я тоже недавно начал изучать) Вроде что то получилось... Но я думаю это можно реализовать грамотнее.
jsfiddle

Comments

[Антон Шаманов]

<img class="h-100 rey" src="https://www.w3schools.com/w3images/lights.jpg">