Bootstrap grid is not aligning correctly and is unresponsive to the .css file

I've been working through the exercises in the Jump Start Bootstrap book and following along with the examples provided. In chapter 02, we're focusing on creating a grid system. I've copied the code for the index.html and style.css files as demonstrated in the book.

However, I'm encountering an issue where the columns in the grid aren't aligning both vertically and horizontally as intended - only vertically. Additionally, the column divs don't seem to be responding to the CSS styles that should be formatting them with specific sizes and colors.

Example of Bootstrap grid from the book Screenshot of how my code outputs the Bootstrap grid

I've double-checked my code multiple times against the book's examples, but I can't seem to find any errors. Here's the link to the code I'm using for the HTML and CSS files: https://example.com/codefiles

If anyone is able to review the code and provide suggestions or point out any mistakes I might have missed, I would greatly appreciate it. I've been struggling with this problem all night and could use some fresh eyes to help me solve it.

The primary issues I suspect are either incorrect class assignments in the column divs or possibly misplacing the 

<link href="css/style.css" rel="stylesheet">
line within the code.

Thank you in advance to anyone who can offer advice or suggestions!

htmlcsstwitter-bootstrapalignment

Answer №1

Looks like your code is functioning correctly. It seems the issue lies with the link tag; ensure that the path is set accurately.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    .col1 {
      background: #5C7080;
    }
    
    .col2 {
      background: #6BC0FF;
    }
    
    .col3 {
      background: #E8AA4C;
    }
    
    .col4 {
      background: #FF384E;
    }
  </style>

  <title>Hello, world!</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col1">
        <h4>Column 1</h4>
      </div>
      <div class="col-xs-12 col-sm-6 col2">
        <h4>Column 2</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col3">
        <h4>Column 3</h4>
      </div>
      <div class="col-xs-12 col-sm-6 col4">
        <h4>Column 4</h4>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</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

The Ajax request is only sending the ID of the initial element

I'm having an issue with dynamic links that all use the same < a > tag. When I click on these links, my AJAX call loads the content correctly, but the new div only shows the id of the first link when other links are clicked. To see the id in the ...

javascriptphpjqueryhtmlajax

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

htmlcsscss-selectorshover

What is the best way to position these elements next to each other?

I'm struggling to align these elements side by side. Here is how it currently looks: https://i.sstatic.net/a246w.png But I want it to look like this: https://i.sstatic.net/SRcOj.png .reviewprofile { background-color: transparent; border: non ...

htmlcss

How can you customize the button outline in Bootstrap 4.2.1?

Whenever I click on a button in my app, I notice that it gets a blue border around it, especially in Chrome. To try and remove this border, I attempted the following: @import '~bootstrap/scss/_functions.scss'; @import '~bootstrap/scss/_vari ...

twitter-bootstrapcssbootstrap-4angular7

I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of ...

cssblogger

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Steps for accessing a file using HTML form input data:

I have a unique setup with two distinct fields featuring drop-down lists - one for selecting a User and the other for choosing Data. Additionally, I've included a button that is intended to serve as an output based on the selected options from the dro ...

javascripthtmlforms

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

javascripthtmlcss

What is the process for defining a distinct column for a specific enum in both mysql and laravel?

In my table, I am creating a time schedule from Sunday to Saturday. I need to generate a unique key for the time slot of 9 am on Sunday, but I also want to reuse the same time slot for another day within the same table. For instance: day |time Su ...

phphtmlmysqllaraveltime

The setStyle() method in JavaFX is like CSS Selectors

Is it possible to bind CSS files to style JavaFX components and also change properties dynamically in code? I'm struggling with the setStyle() method as there's limited documentation available on how to use it effectively. Instead of modifying t ...

csslistviewjavafxstyling

Is there a method to dynamically conceal a div element in the source code during runtime?

Is it possible to dynamically hide a div element from the page's source code during runtime using JavaScript, jQuery, or any other method? For example: <div id="abc"> This content should not appear in either the source code or on the visible w ...

javascriptphpjqueryhtml

Tips for arranging 3 cards in a straight line across the horizontal axis

I'm new to coding and I've recently started using HTML, CSS, and Bootstrap 4. Currently, I'm working on a webpage that includes a navigation bar, 4 cards, and a footer with information. I utilized Bootstrap to create rows and columns, but I& ...

htmlcssbootstrap-4

PHP - designate a separate folder for script and style resources

There seems to have been some discussion about this issue before, but I am struggling to find a solution. I want to add css, js, and asset files to my php framework. However, when calling these files, the path must always match the folder structure like t ...

javaphpcssassets

Center the Div element while keeping it responsive

I am currently working on my personal portfolio website and I am trying to center and align a circular shape that I have animated using CSS. I want to make sure that it remains responsive as well. So far, I have attempted to use flexbox. Here is the code ...

htmlcssresponsive-design

The height set to 100% is causing issues with the padding-bottom property

Currently, I have a setup that includes: A div with width set to 100% and height set to 100% An SVG element inside the div with default width and height of 100% My issue is that when applying padding to the div, the left, right, and top padding seem to w ...

css

Guide on extracting the data related to the clicked link in Django

I have a database that includes information about books, such as Id, title, rating, page count, and author. On my home.html page, I want to display the book titles as clickable links. When a user clicks on a title, it should redirect them to another page ...

htmldjangoajaxdjango-templates

Ways to align elements horizontally while preventing them from shifting positions

I'm faced with a layout challenge where I need to place 2 components side by side, but I want one component to stay on the right without affecting the orientation of the other component. Example: https://i.stack.imgur.com/T5Ram.png Currently, when I ...

htmlcssreactjsmaterial-ui

I am looking to modify the anchor link and image source using JQuery based on the specific div ID

Looking to update the link of an anchor and source of an image inside this div when clicking on the FR button. I need help figuring out how to do this with JQuery. Here's the code: <div id="my_id"> <a href="wwww.google.com&qu ...

htmljquery

Stop the container from wrapping and allow its children to wrap instead

Here is a snapshot of my current layout: <div class="left"> ... </div> <div class="right"> <div class="inner" /> ... several more of these ... <div class="inner" /> </div> My CSS code looks like this: ...

htmlcss

Bootstrap tab toggling with checkbox

I'm attempting to create tabs with the ability to include checkboxes, but when using data-toggle="tabs", the checkbox functionality seems to be disabled. Here is the link to my fiddle. Is there a solution to make the checkbox work within the tab tog ...

javascriptjqueryhtmlcsstwitter-bootstrap