The desired webpage layout is not displaying correctly due to issues with Bootstrap and

Having an issue with bootstrap and HTML, the intended page is not displaying as expected. To briefly explain, this is my first post here.

1. The Google fonts are not rendering properly.

2. I attempted to code the left div to enclose the paragraph in a box but was unsuccessful.

This is what it should look like

Instead of achieving that look, I coded it similar to the course I am working on. Here is the code snippet in Bootstrap, HTML, and CSS.

After implementing the container fluid from Bootstrap, issues began to arise.

It could be that I'm overlooking something or maybe the default values in Bootstrap have changed.

Here is a compressed file containing all the necessary images and files if you wish to try it out on your computer. Link to files

<!DOCTYPE html>
<html>

<head>
...
</body>

</html>

CSS:

#title{
  background-color: #ff4c68;
}

h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: normal;
}
.container-fluid{
  padding: 3% 15%;
}

Answer №1

To ensure proper styling, always remember to add the custom stylesheet (style.css) at the end of the head section as shown below:

<head>
  <meta charset="utf-8">
  <title>TinDog</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Montserrat|Ubuntu" rel="stylesheet">

  <link rel="stylesheet" href="css/styles.css">
</head>

Following these steps will ensure that everything works correctly. To use the "Montserrat" font, either install it on your system or include the Google Fonts link in your index.html or style.css file. Additionally, for headers, adjust the font-size from 1.5rem to 3.5rem and font-weight from normal to bold for desired results.

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

Utilize a select box to toggle between enabling and disabling options

Could someone please help me with enabling and disabling a text field based on a select box option? I'm not sure if I have written the code correctly below. If there are any errors, please correct me. <body> <table width="500" border="1"> ...

Issues arising from script tags causing disturbances in CSS

As a newcomer to the world of web design, I recently embarked on a journey with Bootstrap and also started exploring the platform Codepen. However, after working on a project in Codepen and attempting to transfer my code to Sublime, some unexpected changes ...

What could be causing my JavaScript code to continuously run in a loop?

Below is the code snippet that I am currently working with: JS <script type="text/javascript"> $(function(){ $('#fgotpwfield').hide(); $('#login_submit').click(function() { $('#form_result').fade ...

Struggling to make divs disappear using the .each() method following an ajax call?

Currently, my divs are loaded one by one on page load and everything is working perfectly. However, I encounter an issue when making an AJAX request and then using append(data) to the same container. In this scenario, my code ends up looping through all of ...

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

PHP should be updated after deleting records in the database

On the primary page, user_list.php retrieves $txt to perform a "where Like" query. <?php include_once('dbConfig.php'); $result = mysqli_query($conn,"SELECT * FROM compid"); <title>Computer Record</title> ...

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Looking to achieve a CSS3 linear transition for a "list-style-image" specifically for Firefox? You'll need to include "-moz-" in your code. -moz-transition: list-style-image 0.2s linear; However, the above code is not producing the desired result. I ...

Creating an HTML form to collect user data and then automatically saving it to an Excel file stored in a shared Dropbox account

I am looking to extract data from a user form on a website and then automatically save it as an Excel file in a designated Dropbox account once the user clicks submit. Instead of receiving multiple emails every time the form is filled out, I would like t ...

Ways to Conceal a Menu Item on a Specific Page

I am currently working on building a webpage with NodeJS and Express, utilizing the ejs templating engine. In my navbar, I have a menu item labeled add. When a user clicks on this item, it should take them to another page where they can input some data. Ho ...

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue? NavBar HTML Code: .navbar-logo { width: 93.75px; height: 23.5px; margin-left: 10rem; } .navba ...

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

For the past 3 days, I've been stuck trying to figure out how to print order items. My goal is to have a custom HTML code added to a div with the class 'order-print' when the Order button is clicked. I am using odoo 12 and facing issues wit ...

Creating a clickable div using only CSS is a simple and effective way to enhance the

I'm currently working on creating a div that can be clicked as a whole, instead of just the text inside it. I've experimented with different methods, like the one mentioned here, but all it does is make the shapes disappear. Here's what I h ...

Update the scrollspy navigation in a div with overflow by toggling the active class

Struggling to implement a navigation menu within a self-scrolling div using html/css/jquery. Looking for the menu items to toggle the active class when in view or at the top of the scrolling div. I'm essentially trying to achieve something like this ...

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Performing a jQuery post request using AJAX and setting the content type

Greetings, here is the code snippet: <script type="text/javascript"> 14 $(document).ready(function() { 15 $('#find').click(function(){ 16 17 var amount = $(' ...

Utilizing a live input from an HTML form in App-Script

I am completely new to the world of HTML and App-Script. My goal is to create a dynamic list of options from a Google Sheet that will populate a listbox in my HTML code. When a user selects an option from the listbox and clicks submit, I want that value to ...

Unable to access property 'map' of undefined - error occurred while processing JSON data in line test.js:11

I'm attempting to utilize the json file in the test component below, but I keep encountering the error: TypeError: Cannot read property 'map' of undefined. I have modified the file within the test.js component, and when testing it with a sa ...

JavaScript for Detecting Hits

I have recently ventured into coding as a beginner, and I have already created a calculator using Javascript, HTML, and CSS. Currently, I am working on developing a platformer game using JavaScript and HTML. I have set up the player, obstacles, canvas, fra ...