I am trying to make 1 row and 5 columns next to each other. These 5 columns will be for the projects I want to display on my online Portfolio. I am using Bootstrap framework to build this Website
Please see the code below:
HTML
<div class = "container-md">
<h1>Projects</h1>
</div>
<div class = "container-md-grid">
<div class = "row">
<div class = "col-md-4">Dodge Game</div>
<div class = "col-md-4">Landing Page</div>
<div class = "col-md-4">API data source tracker</div>
<div class = "col-md-4">Calculator</div>
<div class = "col-md-4">JavaScript Quiz</div>
</div>
</body>
</html>
CSS
.container-md
{
background-color: #2A3956;
box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
border: 1px solid #02d3f6;
}
.container-md h1
{
color:#07DD45;
margin-top: 3%;
font-size:20px;
margin-left: 41%;
}
.container-md-grid
{
background-color:#07DD45;
margin-right:278px;
padding-bottom: 300px;
display: grid;
}
.row align-items-start
{
margin-left:10px;
}
.col-md-4
{
position: absolute;
transform: rotate(300deg);
margin-top: 139px;
margin-left: -15px;
}
CodePudding user response:
To make 5 columns, I changed column classes to col
and altered some css.
You can see it in action here.
<div >
<h1>Projects</h1>
</div>
<div >
<div >
<div >Dodge Game</div>
<div >Landing Page</div>
<div >API data source tracker</div>
<div >Calculator</div>
<div >JavaScript Quiz</div>
</div>
</div>
.container-md {
background-color: #2a3956;
box-shadow: inset 0.5px 0.5px 5px 0.5px #02d3f6;
border: 1px solid #02d3f6;
}
.container-md h1 {
color: #07dd45;
margin-top: 3%;
font-size: 20px;
text-align: center;
}
.container-md-grid {
background-color: #07dd45;
margin-right: 278px;
padding-bottom: 300px;
display: grid;
}
.row align-items-start {
margin-left: 10px;
}
.col {
transform: rotate(300deg);
margin-top: 139px;
margin-left: -15px;
}
CodePudding user response:
.html File:
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/
dist/css/bootstrap.min.css"
rel="stylesheet"/>
<div >
<div style="border: 1px solid red">
<div id="p1">Dodge Game</div>
<div id="p2">Landing
Page</div>
<div id="p3">API data source
tracker</div>
<div id="p4">Calculator</div>
<div id="p5">JavaScript
Quiz</div>
<div>lorem</div>
</div>
</div>
.css File:
.col-xs-2{
background:#00f;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}