Having trouble with your Bootstrap grid layout?

I've implemented bootstrap grids to ensure my website is responsive, but I'm facing an issue where my divs are not adjusting according to the templates. The goal is for the divs to cover one-third of the page on a standard MacBook or larger screen, and 100% on mobile devices. What could be the problem with my code? Did I properly load in Bootstrap?

 <html>
        <head>
            <link rel="stylesheet" type="text/css" href="./css/style.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>
            <div class="row">
                <div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
                </div>
                <div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
                </div>
                <div class"col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
                </div>
            </div>
        </body>
        </html>
cssbootstrap-4

Answer №1

Make sure you include an equal sign in your classes.

Don't use

class"col-sm-12 col-lg-4 col-md-4"

Use the correct syntax:

class="col-sm-12 col-lg-4 col-md-4"

Answer №2

There is an issue with the class attribute 

class"col-sm-12 col-lg-4 col-md-4"
, it should be corrected to have an equal sign (=) like this: 
class="col-sm-12 col-lg-4 col-md-4"

.row div{
    background-color:pink;
    border:1px solid gray;
    height:40px;
    }
<link rel="stylesheet" type="text/css" href="./css/style.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

            <div class="row">
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">
                </div>
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">
                </div>
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">
                </div>
            </div>

Answer №3

Just spotted a small error: 

<div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">

.row > div
{
  height:100px;
  background:#ccc;
  padding:5px;
}
<html>
        <head>
            <link rel="stylesheet" type="text/css" href="./css/style.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv1">1
                </div>
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv2">2
                </div>
                <div class="col-sm-12 col-lg-4 col-md-4" id="homeDiv3">3
                </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

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

What are the steps to configure Bootstrap for optimal performance?

Here is the code snippet: <template lang="pug"> b-container b-row b-col h1 strong LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМ ...

vue.jsbootstrap-4pugbootstrap-vue

CSS designs that adapt flawlessly to high-resolution mobile devices with perfect responsiveness

Currently, I am implementing max-width: 768px to modify the appearance of my website. However, with the increasing number of high-resolution devices available in the market such as 4K mobile phones, I am wondering how I can detect them. Should I consider ...

htmlcss

What can I do to prevent a div from covering my entire page?

Currently, I am in the process of developing a website that requires a fixed position div at the top of the page. However, I am encountering an issue where this div is covering a portion of my content. I'm unsure how to resolve this issue. The specif ...

csshtmlpositionweb

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

htmlcssmargin

Tips for updating the background color of a dropdown menu in the navigation bar

I am attempting to increase the size of the dropdown menu and change its background color. Currently, I can only modify the color of the links and the surrounding area. .navbar a { width: 125px; text-align: center; ...

htmlcssbootstrap-4

Having trouble with my carousel code - specifically the next and prev buttons in Bootstrap 5. Any suggestions?

Here’s the issue with my carousel: The carousel indicators are functioning properly, but the "next" and "prev" buttons are not responding. The scripts I have included are: popperjs, bootstrap-5.2.0 jquery-3.6.0. The links in my HTML element are in ...

htmljquerycsscarouselbootstrap-5

Improving Django/VueJS/PostgreSQL by incorporating leading and trailing whitespace tabs

Currently, I am managing a text-field in Django through Django-admin which requires maintaining white-space integrity. To achieve this, I am encapsulating it within <pre> </pre> tags for rendering with the assistance of vueJS and vue-material. ...

htmlcssdjangovue.jsvue-material

Change the visibility of a div element by leveraging the data-target attribute

Hey there, I have a question about how to use the data-target attribute to set the display of a div. Check out my HTML code below: <div class="page page-current" id="home"> PAGE 1 <a href="#" class="next" data-target="#about">Go to about< ...

javascriptjqueryhtmlcss

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

htmlcssreactjshtml-tablematerial-ui

Displaying two dropdown menus with just a single coding component

Hey everyone, I'm having a problem with the dropdown list. I added an ASP dropdown list to a modal popup using a Bootstrap theme, but when the modal pops up, the dropdown list appears twice. Check out this image for reference: https://i.stack.imgur.co ...

htmlcssbootstrap-4bootstrap-modal

Adjust the width of the floating division

I'm facing an issue with a div structure that contains two other divs displayed like this: ---------------------------- | | | | | | | div 1 | div 2 | | | | | ...

csshtmlwidthcss-float

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

I am struggling with the following html code: <div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"></div> </div> The "co ...

htmlcss

When the nav menu toggler in Bootstrap 4 is clicked on a mobile screen, it causes the content to

When I view this on xs or sm screens and click on the navbar toggler, it pushes all the content, including the header where the toggler is located, down the page to accommodate the dropdown menus. This behavior seems to be different from Bootstrap 3 and Bo ...

csstwitter-bootstrapbootstrap-4nav

The declaration file for the module 'bootstrap/dist/js/bootstrap' could not be located

Currently, I am developing a Next.js application and have integrated Bootstrap for styling. However, I am encountering an error when trying to import the bootstrap.bundle.js file. I am facing the following error message: Could not find a declaration file f ...

javascripttwitter-bootstrapbootstrap-4next.js

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

How can you gradually make a CSS border disappear?

Can an element's border fade away with the use of JavaScript only, without relying on jQuery for animation? We are currently working with Sencha and it seems that ExtJS only allows for animating element size and position. While CSS3 offers helpful ani ...

javascriptextjscss

What causes IE11 to sporadically run inappropriate media queries?

My website has been displaying incorrectly on IE11 due to a media query being executed for widths less than 767px, even though the window width is actually more than that. Interestingly, this issue only occurs randomly and never when the debug window is op ...

csstwitter-bootstrapinternet-explorermedia-queries