Как бы вы реализовали этот блок именно через бутсрап 4 [фото]?

Question

[Дмитрий]

6 блоков на три колонки и две строки
Логично задать всем по col-4, но они тесно прилипают друг к другу
Я сделал по другому, задал им col-3, а затем margin во круг каждого
Но все равно слишком широкие, а задавать col-2 по моему извращенство
я не знаю правильно это или нет


Вот что вышло:

Код:

<div class="card">
			<div class="content">
				<div class="row justify-content-center">
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Research</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum libero nam optio incidunt minima ab quisquam necessitatibus eum sunt culpa.
						</p>
						<button class="card__btn">Read more</button>
					</div>
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Portfolio</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, fuga ut alias inventore quod enim nesciunt praesentium modi illo aut.
						</p>
						<button class="card__btn">Read more</button>
					</div>
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Support</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum necessitatibus distinctio dolore corporis, totam obcaecati molestiae quos vel ipsam rerum!
						</p>
						<button class="card__btn">Read more</button>
					</div>
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Documentation</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quos esse perspiciatis consequuntur fugit earum adipisci, aliquid doloremque corporis recusandae.
						</p>
						<button class="card__btn">Read more</button>
					</div>
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Development</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nulla, illum quas iusto modi? Officia eos, iste ex aliquid fuga.
						</p>
						<button class="card__btn">Read more</button>
					</div>
					<div class="card-item col-lg-3">
						<img src="img/icons/smartphone.png" alt="" class="card__img">
						<h1 class="card__title">Design</h1>
						<p class="card__text">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi in quia atque animi, eveniet dolorum dignissimos voluptatibus quod vero magnam!
						</p>
						<button class="card__btn">Read more</button>
					</div>
				</div>
			</div>
					
		</div>

// card

.card{
	background-color:#e4fdf9;
	border:none;
}
.card-item{
	background-color:#fff;
	color:#212121;
	text-align: center;
	margin: 30px;
	
	height: 439px;
	
}
.card__img{
	margin-top:58px;
}
.card__title{
	margin-top:38px;
	font-weight: 600;
	font-size: 20px;
}
.card__text{  
	margin-top: 27px;
	font-size: 15px;
	padding:0 50px;
   }

.card__btn{
	background-color:Transparent;
	box-sizing:none;
	border:2px solid #212121;
	text-transform: uppercase;
	color:#212121;
	font-size: 20px;
	font-weight: 600;
	margin-top: 50px;

}

Comments

[Rustam Bainazarov]

Я ХЗ, правильно это или нет, но неспособность сверстать такую примитивную структуру без Bootstrap — вот это действительно неправильно.

P. S. Кнопка не отцентрована. И иконки визуально тоже из-за пустого пространства справа от них.

[Дмитрий]

Рустам Байназаров, Сверстать без бутстрапа можно, но потом с адаптивностью возиться

[Rustam Bainazarov]

Дмитрий, мда :))

Сложно прописать 4 строчки кода для разных разрешений?

[Дмитрий]

Рустам Байназаров, Ну да, я не смыслю в этом особо. Твои 4 строчки у меня выльются в кривую структуру и тучу медиа запросов.

[Дмитрий]

Рустам Байназаров, И возиться с этим буду пол часа )

[Rustam Bainazarov]

BEM тоже неправильный. Компонент имеет класс .card-item, а все его блоки почему-то — .card__

[Дмитрий]

Рустам Байназаров, То есть записывать как ".card-item__title" и тп ?

[Rustam Bainazarov]

Дмитрий, да, иначе нет привязки.

[Дмитрий]

Рустам Байназаров, ок.
В остальном, я конечно понимаю, что нужно учиться и с бутстрапом я как мартышка с гранатой, потому что не могу сверстать адаптивно без него. Буду пытаться.
Но в целом, как быть с тем, что возможность задавать ширину пропадает, когда блоку задаешь количество колонок ?

[hellcaster]

Дмитрий, чесно говоря, вам лучше забросить bootstrap, изучить flex, grid, а уже потом посмотреть нужен ли он вам. У HTMLAcademy есть хороший курс (лучше скачать с torrenta). HTML &CSS уровень 1 и 2

[Rustam Bainazarov]

Дмитрий, вот так:



Всё проше, чем вы думаете.

[Дмитрий]

muryn.official, Хм, спасибо за совет. А из ютубовских можете что-нибудь порекомендовать ? и по гридам и по флексам я встречал в основном пересказанные руководства из документации, представления о том, как это работает на практике оно дает мало. Ну если с флексами я +- разобрался, понял как они работают, то с гридами сколько не практиковался так и не понял как их использовать эффективно

[hellcaster]

Дмитрий, не ютуб, но тоже бесплатно, а главное есть практика и исходные материалы
html and css lvl 1
html and css lvl 2

Answer 1

[hellcaster]

Мне кажется, что правильно будет сверстать на flexbox. И с адаптивностю не нужно париться. flex-wrap: wrap для родителя и дело в шляпе. Чесно говоря, мне в кайф делать такие сетки на flexbox, но они редко попадаются

Answer 2

[Alams Stoyne]

Я бы сделал так:

<div class="d-flex flex-wrap">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
</div>

.block{
    max-width: calc(100%/3 - 20px); 
    margin: 10px;
    border: 1px solid #000;
}