Creating a single row with five columns using HTML and CSS

I'm currently working on setting up a layout consisting of 1 row and 5 columns placed side by side. These columns are going to showcase the projects that I intend to feature on my online Portfolio. To achieve this layout, I am utilizing the Bootstrap framework for developing my Website

Below is the code snippet:

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;
}
htmlcssbootstrap-4multiple-columns

Answer №1

.html Code Block:

       <link       
         href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120dF1e2fFe9">[email protected]</a>/
         dist/css/bootstrap.min.css" 
         rel="stylesheet"/>
        <div class="container">
            <div class="row" style="border: 1px solid red">
              <div class="col-xs-2" id="p1">Dodge Game</div>
              <div class="col-xs-2 col-half-offset" id="p2">Landing 
               Page</div>
              <div class="col-xs-2 col-half-offset" id="p3">API data source 
               tracker</div>
              <div class="col-xs-2 col-half-offset" id="p4">Calculator</div>
              <div class="col-xs-2 col-half-offset" 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%
    }

Answer №2

In order to create 5 columns, I made adjustments to the column classes and tweaked the CSS styles.
Check out the updated layout here.

<div class="container-md">
  <h1>Projects</h1>
</div>
<div class="container-md-grid">
  <div class="row">
    <div class="col">Dodge Game</div>
    <div class="col">Landing Page</div>
    <div class="col">API data source tracker</div>
    <div class="col">Calculator</div>
    <div class="col">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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the size of the input field as text is being typed in

Can a text input box be automatically resized as text is entered? I've been looking online but haven't come across any solutions. ...

javascripthtmlcss

Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...

jqueryhtmlcssanimation

Is there a way to customize my visual studio code to automatically insert an indented space between curly brackets in CSS when I press enter?

Whenever I try to open curly brackets in CSS and press enter, it simply moves to the next line without adding an indentation as shown below: body { } Despite going through the settings and experimenting with different options, I haven't been able to ...

htmlcssvisual-studio-code

Should I convert to an image or utilize the canvas?

I'm debating whether it's more efficient to convert a canvas drawing into an image before inserting it into the DOM, or if it's better to simply add the canvas itself. My method involves utilizing canvas to generate the image. ...

javascripthtmlcanvas

Gallery tiled with images enclosed in <a> tags

I've been experimenting with pure CSS (Bootstrap 4) to create a tiled gallery layout. To achieve this, I've been utilizing the flexbox capabilities provided by Bootstrap through classes like d-flex and flex-wrap. While everything seems to be wor ...

twitter-bootstrapcssflexboxbootstrap-4

Anomaly in SVG Animation Performance

My SVG animation was going smoothly until the final element, which unfortunately ruins the entire thing. What I've created is a hexagon composed of 6 individual triangles, designed to fold out and back in on a continuous loop for use as a loader anim ...

htmlcssanimationsvg

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

javascriptcssantyui

Unveiling the hidden: Leveraging Python to extract elements not visible in HTML, yet present in Chrome's "Inspect Element" tool

Hello Python Experts! I'm diving into the world of Python and working on a program to retrieve data from a webpage. If the page returned all the information in its HTML source, there wouldn't be an issue as it's easily viewed in Chrome. Howe ...

javascriptpythonhtmlgeoipmaxmind

Show the HTML content fetched from the database using PHP

After pulling html source code from a database and storing it in a PHP variable, I noticed that the content consists of table rows structured like this: <tr><td>10:00 AM</td><td class="success">Available</td></tr> < ...

phphtml

Move the cursor to the end of the text when the key is released

I've developed a feature similar to that of a command line interface. When you input commands and hit the up key, the previous command is displayed. Everything is functioning as intended, but there's one minor issue. The current problem I'm ...

javascripthtmlangular

Directly insert an image into your webpage by uploading it from the input field without the need to go through the server

Can an image be uploaded directly from <input type="file" /> into an HTML page, for example through the use of Javascript, without needing to first save the image to the server? I am aware that AJAX can accomplish this, but if there is a way to ...

javascripthtmlinputimage

Custom HTML select element not triggering the onchange event

I found a code snippet on https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select that demonstrates a custom select input with an onchange event. However, I am facing an issue where the onchange event does not get triggered when I change th ...

javascripthtmlcss

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

htmlcssheightbackground-color

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

javascripthtmljquerycssbootstrap-5

Interactive image grid with adjustable description field per image upon selection

My goal is to create a grid of images with a single text field below the grid. This text field should display the description of the image that was last clicked. The grid is implemented using floating divs within a main div, as shown in the code snippet be ...

javascriptjqueryhtmlcss

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

I am facing an issue with a Bootstrap 3 web page. Some machines have IE configured to load intranet pages in Enterprise profile mode, while others have the default Desktop profile set in IE11. This configuration has caused the layout to break completely. ...

javascriptcsshtmltwitter-bootstrapinternet-explorer

Can an RMD file access a CSS variable?

In my .Rmd file, I am interested in adjusting the style based on whether it is viewed on a mobile device or not. Checking window width with @media in CSS makes this task simple. Let's consider a scenario where there is a root variable --mobile: 1; ...

javacssrr-markdown

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

jqueryhtmlcsscss-animations

Choosing various files from separate directories within an HTML input type="file" element

Is there a way to select multiple files from various directories using the HTML input type="file" element? I have been searching for resources on how to do this without any luck. Are there any npm packages that can assist with achieving this functionalit ...

javascripthtmlreactjsvue.jsfrontend