want to create a bootstrap album on homepage? - html

Question

I am trying to create a album style like the example below:
if you look at the recent works section where you have an image on one side and text on the other but it takes up the whole width of the page:
https://colorlib.com/preview/theme/racks/
or the example on this page:
https://getbootstrap.com/docs/4.4/examples/product/
<section class="recent-ideas">
<div class="container">
<div class="card w-50 h-10 p-3" style="width: 18rem;">
<img class="card-img" src="images/bulb.jpeg" >
</div>
</section>
The code i am using above basically creates a card in bootstrap but when i insert the picture i dont know how to format the height and width to keep everything the same

Answer 1

As I mentioned in the comment use container-fluid and overwrite the left/right padding using another class in a different css file.
HTML File
<div class="container-fluid my-container">
<div class="row no-gutters"></div>
</div>
CSS File
.my-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
Then you can add your css file as you normally do. The reason to not overwrite the container-fluid class is because you might need it in another part of your site with the paddings.
The second option is not use the container class and use the row and no-gutters:
<div class="row no-gutters">
<!-- your content here -->
</div>
To give the images the same width just use the same column class in all of them and use the background-image property in the elements instead of using an actual image. Since in the sample the images have a link in them you can use something like this:
HTML File
<div class="row no-gutters my-row">
<div class="col-12 col-md-6">
</div>
<div class="col-12 col-md-6">
<div class="content-container">
<!-- content-here -->
</div>
</div>
</div>
CSS File
.content-container {
display: flex;
height: 100%;
align-items: center;
padding: 2rem 1rem;
min-height: 50vh;
}
.content-text {
text-align: center;
margin: 0;
}
.image-link {
display: block;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
I added the min-height to the image and content container in order to keep the sizes regardless of the content. In the link you provide the reason all the elements have the same height is because they have the same amount of text, if you change that the entire layout breaks in an ugly way, that is a sign of a poorly thought and constructed layout, that hasn't been tested thoroughly.
Here is a working example:
https://codepen.io/rhernando/pen/WNbaaeN?editors=1100