I'm currently mastering Bootstrap v5.0 and experimenting with creating a webpage using Bootstrap. I've encountered an issue that requires assistance. Specifically, I'm trying to add extra space between two columns on smaller screens while maintaining the design for larger screens.
I need guidance on the Education section of my code.
* {
/* margin: 0;
padding: 0;
box-sizing: border-box; */
font-family: 'Open Sans', sans-serif;
color: #ffffff;
}
/* ==================== Header ==================== */
header {
background: #9b59b6;
}
.header-title-box {
background: #8e44ad;
}
/* ==================== About Container ==================== */
.about-container {
background: #2ecc71;
}
/* ==================== Education Container ==================== */
.education-container {
background: #34e7e4;
}
/* Additional CSS rules...
<!DOCTYPE html>
<html lang="en">
...
</html>Here are the images:
The layout is fine on big screens https://i.sstatic.net/RkauU.png
But I require some spacing on small screens here: https://i.sstatic.net/vIcf9.png
Any suggestions on how to achieve this?