How to make one row with 5 Columns in HTML and CSS-CodePudding

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%
    }