I’m new to bootstrap 4 , i need to build site like this
i know to make columns and rows but in the middle where there 4 pictures im confused , i don’t know how to use it . any help.
thank you
Andrea.
i know to make columns and rows but in the middle where there 4 pictures im confused , i don’t know how to use it . any help.
thank you
Andrea.
If you’re not good with html/css it will look slightly different but essentially the same. the image shows the difference. Notice the red line where the two blocs are divided.
The Blocs way (without writing custom css)
- Add a new Bloc with 2columns.
- In the left column add a Bric with 3columns.
- Place the round image Bric in each col.
- Under that 3column bric add Brics for your text (headings and paragraph)
- In the right column you place the cutout image of “thumbs up guy”.
- For the background the easiest way is a repeating background image 10px width x 500px height (give or take) Make the top 20% of the image the same color as the background of the page (white in the case above) the bottom 80% of the image can be whatever color you want. It’s a gradient in the example above.
Note: without custom css you wont get the exact markup above. It will be very close, but the content on each side of the 2 column Bric will not appear to wrap around the image of the guy. On the plus side though if you follow this way the site scale mobile friendly without much extra work. There’s no telling what the mobile looks like for the design above, but I’m certain it took custom css to get it just right.
Alternatives:
You could make the guy and the background gradient part of a large background image. The rest of the instructions would remain the same. I think this will take some css teaks for to get it perfectly responsive. That’s why I gave the method above.
Hope this helps.