How to implement an 8-column layout within a 12-grid bootstrap framework?

Hey guys, so I've been trying to recreate this page with Bootstrap and it's all going smoothly except for this one part. Here is the link I'm referring to: https://i.sstatic.net/0mXMm.png

I have 2 questions:

  1. Which HTML element should I use for these lines?
  2. Any idea on how I can divide the 12-column layout into 8 equal parts?

Below is a snippet of the code I've been working on:

<div class="container" style="margin-top: 3%;">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="First Name">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Last Name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Display name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Email Address">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Password">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Confirm Password">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-3">
                    <button class="btn btn-secondary">I Agree</button>
                </div>
                <div class="col-xs-9">
                    <p>
                        By clicking <span class="label label-primary">Register</span>, you agree to the <a href=#>Terms and Conditions</a> set out by this site, including our Cookie Use.
                    </p>
                </div>
            </div>

            <div class="row">

            </div>

            <div class="row" style="">
                <div class="col-xs-6">
                    <button class="btn btn-primary btn-block" style="font-weight: bold;">Register</button>
                </div>
                <div class="col-xs-6">
                    <button class="btn btn-success btn-block" style="font-weight: bold; ">Sign In</button>
                </div>
            </div>

        </div>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Another approach is to divide the row into two halves, with each half containing four sections, as illustrated below:

<div class="row">
    <div class="col-xs-6>
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
</div>

This method creates eight equal sections while minimizing the use of additional wrappers.

You can experiment with different HTML elements for these lines - try using div, span, or even hr. Have fun exploring! :)

Answer №2

give this a shot

<div class="row">
  <div class="col-xs-2></div>
  <div class="col-xs-8">{YOUR COLORS HERE}</div>
  <div class="col-xs-2></div>
</div>

To showcase your colors, you could present them as an image or enclosed in divs within a container to ensure they line up consistently on the same row.

 <div style="position:relative;display:block;width:100%;height:16px">
  <div style="position:relative;display:inline-block;width:12.5%;background-color:red"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:blue"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:green"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:orange"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:teal"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:cyan"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:purple"></div>
  <div style="position:relative;display:inline-block;width:12.5%;background-color:black"></div>
 </div>

This method ensures balanced spacing around your colorful row :) hoping it works out for you. You can apply the same technique to all rows to keep everything aligned like the image, with a bit of padding and centered. Alternatively, divide the row into 2 (6) sections, then each section into 4 (3)

Answer №3

give this a shot

<div class="row">
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row col-xs-3">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

or how about

<style>
.colorbar{
    display: inline-block;
    margin: -2px;
    width: 12.5%;
    height: 10px;
}
/*add some color*/
</style>
<div class="row">
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
    <span class="colorbar"></span>
</div>

Answer №4

One of the simplest methods I employed to achieve this style was through utilizing HTML5 Canvas. Here is the code snippet:

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">

        #myCanvas {
            width: 500px;
        }

    </style>
</head>

<body>

    <canvas id="myCanvas" width="800" height="20" >Your browser does not support the HTML5 canvas tag.</canvas>

    <script>
        var c = document.getElementById("myCanvas");
        var line1 = c.getContext("2d");
        line1.beginPath();
        line1.moveTo(0,0);
        line1.lineTo(100,0);
        line1.lineWidth = 20;
        line1.strokeStyle = "#6FCCAC";
        line1.stroke();

        // The rest of the lines follow similar pattern with different colors

    </script>

</body>
</html>

If you're interested in learning more about Canvas, here are some recommended sites:

  • html5canvastutorials
  • W3 Schools
  • MDN
    Explaining the code further... You'll notice a style tag within the head tags. This code accurately sets the canvas's actual width, which may differ from the one specified in the canvas tag. The width and height in the canvas tag simply define the work area for drawing, whereas each hexadecimal color code represents the color of the lines.

    I hope this explanation proves helpful...

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

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

htmlcssanimationslider

Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...

javascripthtmlcss

What steps can I take to verify that all textboxes are filled and checkboxes are selected before allowing the user to submit the form?

Here is the JavaScript code and a snippet of the HTML that I am using to create a form. I am having trouble figuring out why the form can still be submitted even when there are empty fields. Ideally, a dialog box should pop up indicating which fields nee ...

javascriptjqueryhtmlforms

Run a script on an ajax requested page prior to the page being loaded

My website navigation utilizes AJAX for seamless transitions between pages. Specifically, I have two pages: index.html and profile.html. The structure of both pages is as follows: <html> <head> <script src="script1.js" type="text/javascript ...

javascriptjqueryhtmlajax

Switching between Angular components with a button press

I'm looking to switch from one Angular component to another when a button is clicked. Specifically, I have two components: app and login. Upon clicking a button in `app.component.html`, I want to navigate to `login.component.html`. Here's what I& ...

htmlangularbootstrap-4

After attempting to read in this JSON text string, it is stubbornly refusing to display properly with a line break

I have a snippet of text stored in a JSON file that appears like this "I want a new line\nhere". This is the code I am using to display the text after replacing the \n with a <br />: <p className="subtitle is-5 has-text-w ...

htmljson

The lack of search results on Google Custom Search could be due to issues with META tags

I have a website and I've successfully integrated Google Custom Search following all the provided instructions. Although I indexed my site three months ago, the custom search still shows no results. Even after adding sitemap.xml, there has been no i ...

phphtmlmeta-tagsmetagoogle-custom-search

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

jquerycss

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

What are the proper steps to ensure images are displayed correctly on mobile devices?

Our background image is 1920x1080p and looks great on desktop browsers, but it's not displaying properly on mobile devices in either portrait or landscape mode. Is there a way to resolve this issue without needing multiple images? Can we automatically ...

htmlcssresponsive-design

What is the best way to utilize $(target) within a directive?

I created a custom directive for selecting time using two blocks. The challenge is detecting the target event on specific blocks within the directive's template. Directive Template: <div class='time-picker-container'> <div clas ...

javascriptjquerycssangularjs

Can we resize the button to match the width of the blue bar?

.nav-info { height: auto; background-color: darkblue; color: white; padding: 1em; padding-left: 5%; flex-direction: row; justify-content: space-between; } .flexbox { display: flex; } .info a { color: white; text-decoration: none; fo ...

htmlcssflexbox

Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container? Given the HTML provided, how can I achieve this layout using flexbox? I attempted to accomplish thi ...

htmlcssflexbox

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

The image does not appear to have been edited even after clicking the update button

I'm currently following a Django tutorial but I'm having an issue with editing blog post images in my blog app. I am using Django version 3.1.2. views.py def edit_post(request, post_id): post = BlogPost.objects.get(id=post_id) if reques ...

htmldjangodjango-viewsdjango-formsdjango-templates

Switch up the box-shadow color with ColorThief!

Is there a way to adjust this script to change the box-shadow color of #player1? <script type="text/javascript> $(window).ready(function(){ var sourceImage = document.getElementById("art"); var colorThief = new ColorThief(); var color = ...

javascriptcss

Enhance your webpage with dynamic styling using third-party CSS animation

Apologies for any similarity to other questions on this topic. I have searched extensively, but any assistance would be greatly appreciated. I am utilizing a new animation library from Animista to animate specific elements on a test website. Animating ele ...

javascriptjqueryhtmlcsscss-animations

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

cssless

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas