Is there a way to substitute the bootstrap in order to accomplish the same goal?

<!DOCTYPE html>
<html>

<head>



  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



  <title>
    Home - Hasan's Website
  </title>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }

    .jumbotron {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(image.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px;
    }

    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }

    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }

    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }

    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }

    body {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
    }

    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      width: 100%;
      color: white;
      font-size: 100px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>





</body>

</html>

I received assistance from an individual who utilized Bootstrap, which my instructor did not authorize. The use of bootstrap causes the text to be spaced out differently than desired. How can I maintain appropriate spacing without utilizing Bootstrap? Specifically, I wish to remove Bootstrap and still have the title "Computer Engineering" properly formatted. Any guidance on achieving this would be greatly appreciated! This pertains to my Grade 11 Engineering course.

Answer №1

Instead of just providing a direct answer, I prefer to guide you towards discovering the solution on your own terms.

To begin, ensure that the page is running with bootstrap styles enabled and access it through a modern browser like Google Chrome. Take a moment to right-click on the specific element that catches your interest and choose Inspect Element from the given options. This action will reveal the CSS properties responsible for the appearance and design of the selected element.

After identifying these properties, feel free to integrate them into your own project. Voila, mission accomplished!

Answer №2

The reason for this issue is

div, span{
font-size : 16px;
}

You can fix it by simply adding font-size : 18px; to p. This should resolve the issue.

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

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

Adjusting the height of the Sencha Touch container to accommodate its content

In Sencha Touch, I have a view that generates a popup box from the right when a button in the bottom toolbar is clicked: Ext.define('TheApp.view.PopupTablet',{ extend: 'Ext.form.Panel', xtype: 'popupbox', confi ...

Adjusting the height of a flexbox column to fit three rows within the space of two

Exploring the wonders of Flexbox and delving into its functionality. I have shared a Code Sandbox link showcasing my React /bootstrap code in progress... Currently, I am developing a clock component with two buttons for adjusting time (increase/decrease). ...

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

Is there a way to alter the color of options within a select tag when hovering the mouse over them

After searching through multiple websites, I couldn't find a solution on how to change the option background color on hover from blue to green. The screenshot provided below illustrates what I am requesting for in a clearer manner. https://i.sstatic. ...

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

How can I alter the appearance of HTML text when hovering over the enclosing div?

I want the text to change color and zoom when the cursor is near it (when the mouse enters the area of the div containing the text). Currently, I am able to change the text color only when hovering directly over it. Below is a snippet of the code. HTML: & ...

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

Placing a collection of <a> anchor tags inside a div and making them float

I've been experimenting with building a website from scratch, opting for a simple and blocky design. I placed the navigation at the top of the page in an unordered list format containing <a> elements within list tags, all enclosed within a <n ...

Is there a way to ensure that the header is centered at the top and the footer is centered at the bottom of every printed page, even when

Currently, I am utilizing spatie/browsershot to generate PDF documents within a Laravel project. While it offers convenient methods such as headerHtml and footerHtml for customization, there seems to be an issue with handling images. Specifically, only bas ...

Leaflet OSM: Adjust map focus to the polygon's center

Looking to create an HTML file that integrates the Leaflet library to display an OpenStreetMap view with a centered polygon? I've been following a helpful discussion, but still unsure about how to center and autozoom an arbitrary polygon on the map. A ...

Issue with Django and Bootstrap: form-check-inline functionality not functioning as expected

UPDATE 1 I have attempted to use both crispy-forms and widget-tweaks, but it does not seem to work. It appears that widget=forms.RadioSelect() is not compatible with using these two libraries together... I am looking to display radio buttons inline usin ...

In which specific location within the Bootstrap CSS files can the `footer` class be found?

Being new to coding, I've grasped HTML and CSS classes and am now delving into Bootstrap. Despite my efforts, I can't seem to locate the footer class in any of the Bootstrap CSS files like bootstrap.css. Similarly, I'm having trouble findi ...

Inconsistencies in table row border behavior

I created a table that allows users to set a marker on a specific row by adding a 5px border to the left side of the row. Interestingly, when the border is added to the first row, the table gets padded on the right by a few pixels. However, this padding d ...

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

I possess the source code for a JavaScript/HTML5 application that operates on the client-side and manages the transmission/reception of audio and video data streams to/from a server. My objective is to develop a C++ application that fully integrates the c ...

Unable to access the website's source code

It's frustrating when I can't view the source code of certain websites, such as this one: . When I try to right-click and select "View Source", only a portion of the code is displayed, which isn't the proper source code for the page. Alth ...

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

changing the breadcrumb item to a dropdown item in a dynamic way

Hey there, I'm currently working on creating a breadcrumb item using Angular. Here is what I have so far: https://i.stack.imgur.com/zt5yX.png I decided to add a dropdown for the breadcrumb item, but I'm facing a challenge: I want to be able to ...

"Learn the best way to redirect the parent theme directory URL to the child theme directory in a dynamic and efficient

Looking to leverage my skills on the WordPress platform, I recently ventured into creating a child theme and require some help with PHP coding and functions.php related tasks. In an effort to maintain folder structure, I copied content from the parent the ...