3 columns on a small device (bootstrap)

HTML & CSS
1

Hi,

I have the following code.

I am trying to create 3 equal columns with an image in on a small screen, but for some reason, the images are not appearing in columns.

Can anyone see what I have wrong?

<div class="container">
	<div class="row dark-grey">
		<div class="col-lg-4 col-sm-12 col-xs-12  page-header-ae">
			<h1>Lorum Ipsum</h1>
		</div>
		
		<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12 pad-x-0">
			<div class="row  image-header">
		
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 image-header-ae-beauty ">
					<img src="/wp-content/uploads/2018/10/image-1.png"  />
				</div>

				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 image-header-ae-beauty ">
					<img src="/wp-content/uploads/2018/10/image-2.png" />
				</div>

				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 image-header-ae-beauty ">
					<img src="/wp-content/uploads/2018/10/image-3.png" />
				</div>

			</div>
		</div>
	</div>
</div>

Thanks

2

I worked it out - I needed to use col-4 instead of specific column sizes

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.