Attempting to incorporate a border underneath the H1 title labeled MY TODO LIST

<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="This is a sample HTML code">
    <meta name="author" content="John Doe">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center" style="background-color: white;">
              <div class ="col-12">
                <h1 class="text-light text-center">MY LIST OF TASKS</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Task to test</p>
                  </div>
                </div>
                  
                 <!-- Remaining task items with checkboxes and test description -->

                <!-- Buttons for task filtering -->
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>

htmlcssbootstrap-4margin

Answer №1

To create a bottom border using CSS, you can use the following code:

h1{
border-bottom: solid white 2px;
}
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center">
              <div class ="col-12">
                <h1 class="text-light text-center">MY TODO LIST</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Test todo</p>
                  </div>
                </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>

Answer №2

Keep up the good work, you're on the right track, just a minor adjustment needed. The code snippet has been updated, so go ahead and run it.

Make sure to update your h1 tag with this:

<h1 class="text-light text-center pt-3 mb-5">MY TODO LIST</h1>

index.html

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/application.js"></script>
    <link rel="stylesheet"
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    </head>
      <body>
        <div class ="container bg-dark h-100">
            <div class ="row flex-row justify-content-center">
              <div class ="col-12">
                <h1 class="text-light text-center pt-3 mb-5">MY TODO LIST</h1>
              </div>
              <div class ="col-4 bg-light flex-column">
                <div class ="row border border-bottom-3">
                  <div class="ml-2 form-check align-self-center">
                    <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                  </div>
                  <div class="col-10">
                    <p class="mt-3">Test todo</p>
                  </div>
                </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                  <div class="row border border-bottom-3">
                    <div class="ml-2 form-check align-self-center">
                      <input class="form-check-input position-static m-auto" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
                    </div>
                    <div class="col-10">
                      <p class="mt-3">Test todo</p>
                    </div>
                  </div>
                <div class ="row">
                  <div class ="col-12 d-flex flex-row justify-content-end">
                    <button type="button" class="btn btn-light">All</button>
                    <button type="button" class="btn btn-light">Active</button>
                    <button type="button" class="btn btn-light">Completed</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </body>
    </html>

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

Setting expiration dates for cached images

I am interested in optimizing the loading speed of my webpage by setting an expiration date for images. However, I am unsure about where to specify this. The images on my website are loaded via CSS from Cloudfront using an S3 bucket in AWS. Can you provid ...

cssamazon-web-servicesamazon-s3amazon-cloudfront

Creating a Dual Linear Gradient Background with Tailwind: Step-by-Step Guide

Can you use two linear backgrounds on a single element in Tailwind CSS? I found this CSS code that seems to achieve it: background-image: linear-gradient(to right, #f8fafb 50%, #161616 50%), linear-gradient(to right, #161616 50%, #f8fafb 50%); I att ...

cssbackgroundbackground-imagetailwind-csslinear-gradients

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

sqlitehtmlenyo

How come JavaScript's history.back() method does not display form values?

I have been developing an HTML form that submits values to a PHP script. When encountering errors, I currently display the error message along with a link containing javascript:history.back(). In Chrome, the form reopens with all values retained from the ...

htmlformsheadercross-browsermeta-tags

Executing an SQL delete query with a button click using a JavaScript function in PHP

I have created a setup with three essential files - index.html, database.php, and function.js. In database.php, there is a form generated containing a delete button that triggers the deletion SQL query when clicked. The primary objective is to present a ta ...

javascriptphphtmlmysqlajax

I am looking to dynamically assign CSS classes to elements in my HTML document. Additionally, my project utilizes Angular 5 and Bootstrap version 3.3.7

I am currently in the process of generating a table using data obtained from a JSON. Due to the potential for a large amount of data, I have implemented a loop to create all the rows within the table. My goal is to enable users to click on any specific row ...

htmlcssangulartwitter-bootstrap-3

Positioning a Bootstrap popover directly adjacent to the cursor's location (within the clicked element)

I've been struggling to get my bootstrap popover to show up inside the element I'm calling it on, next to my mouse cursor. Despite extensive research in the popper.js documentation and numerous attempts with various parameters, including the &apo ...

javascriptcssbootstrap-4bootstrap-popoverpopper.js

AngularJS allows us to easily include the route provider templateUrl path in the view div, making

I have the following route provider setup: $routeProvider .when('/', { templateUrl: '/slapppoc/Style Library/TAC/Views/tarification/home.html', controller: 'homeController' /* resolve: { // This f ...

htmlangularjsangular-routing

When you hover over HTML tables, they dynamically rearrange or shift positions

Issue: I am encountering a problem with multiple tables where, upon hovering over a row, the tables are floating rather than remaining fixed in place. Additionally, when hovering over rows in the first or second table, the other tables start rendering unex ...

javascriptjqueryhtmlcss

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

htmlcsscss-selectors

Tips for dynamically including classes in NextJS component with class names from CMS?

I am in search of a solution that will offer some styling flexibility within a CMS to dynamically alter the classes of specific components within my NextJS application. The code snippet I'm working with is as follows: pages/index.js: ... import clien ...

cssreactjsnext.jstailwind-cssserver-side-rendering

Unable to export to Excel using TableTools feature

Trying to export a DataTable view to Excel using the TableTools plugin, but encountering issues with the "Excel" button not working. Without a step-by-step tutorial for guidance, here's the code used in a test HTML: <!DOCTYPE html> <html ...

javascriptjqueryhtmldatatablestabletools

Targeting all children instead of just the odd ones when using `nth-child(odd)`

In the portfolio, I have a unique requirement where every odd entry should be reversed. These projects are generated dynamically from an array and passed into the component through props. To style it, I'm utilizing styled-components. However, I&apos ...

cssreactjscss-selectorsstyled-components

Images added with JavaScript are not displaying on the webpage

On the website I'm working on, I am attempting to use Javascript to insert an image. My method involves using createElement and setAttribute to specify the image location in my file directory. Below is a snippet of the code I've been using: var l ...

javascripthtml

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap

Errors in syntax that were missed and errors in referencing that were missed

I've been struggling with this program for hours and now I'm encountering these errors. I have no idea what went wrong, any assistance would be greatly appreciated. Uncaught SyntaxError: Unexpected token { Uncaught ReferenceError: start is ...

javascripthtmlonload

Executing a click event on an input element using Angular

Currently, I am looking to create a custom upload button as an alternative to using the standard HTML upload button. Is there a way for me to trigger a click event on the input element in order to manually open the file browser? <div class="upload-bu ...

angularhtml

Creating a cell in HTML/CSS with wrapped data

Is there a way to properly wrap data in the table instead of getting a scroll bar when the template name is too long? I would like it to automatically go to the next line. <table class="selectablePreviousOrder dashboard"> <tr ng-class-odd=" ...

htmlcss

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

pythonhtmlseleniumwebdriverwait

Unable to send hyperlinks via email following header configuration

Having trouble sending links via email. Using the wp_mail() function for email delivery. Adding the header $headers .= "Content-Type: text/html; \r\n"; seems to be stripping out the href attribute in the received emails. Experimented with bo ...

phphtmlwordpresshtml-email