Troubleshooting Bootstrap: Identifying errors in my bootstrap code

Could you help me diagnose the issue with this code? I have tailored it to be responsive on my tablet by using 12 columns for two divs, expecting the third div to be in a new row. However, upon checking my index.html on the tablet, all the divs are displayed in a single row. What could be causing this problem?

  <link rel = "stylesheet" href="css/bootstrap.min.css">
  <link rel = "stylesheet" href = "demo.css">  
</head>
<body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 ">Bootstrap Tutorial</div>
        <div class="col-xs-6  ">Bootstrap Tutorial</div>
         <div class="col-xs-4  ">Bootstrap Tutorial</div>
        <button class="btn btn-primary">click</button>
     </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

The col-xs-* classes have been removed from Bootstrap 4.

You should now use the corresponding col-* classes instead.

For more information, please refer to:

https://getbootstrap.com/docs/4.0/migration/#grid-system

Additionally:

Based on your question and code, it seems like you may be misinterpreting the expected behavior.

I recommend reviewing the documentation provided on this page:

https://getbootstrap.com/docs/4.0/layout/grid/

The code snippet below may help clarify how it functions: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
   
<div class="container">
    <h2>Medium ('md') breakpoint:</h2>
    <div class="row">
        <div class="col-md-6">Bootstrap Tutorial 1</div>
        <div class="col-md-6">Bootstrap Tutorial 2</div>
        <div class="col-md-6">Bootstrap Tutorial 3</div>
    </div>
</div>

<div class="container mt-3">
   <h2>Large ('lg') breakpoint:</h2>
    <div class="row">
        <div class="col-lg-6">Bootstrap Tutorial 1</div>
        <div class="col-lg-6">Bootstrap Tutorial 2</div>
        <div class="col-lg-6">Bootstrap Tutorial 3</div>
    </div>
</div>

Answer №2

Keeping track of all the changes made to your original post. I have moved your <script> and <link> tags to the <head> section. Additionally, I have updated the col-xs-* to col-*.

UPDATE: With the help of Temani Afif, I have made improvements to my post. It seems that he is using BS4 instead of BS3, which I initially assumed based on an older version of the post.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col col-6">Bootstrap Tutorial</div>
      <div class="col col-6">Bootstrap Tutorial</div>
      <div class="col col-4">Bootstrap Tutorial</div>
    </div>
  </div>
</body>

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

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

JavaScript can be used to call a web service directly from a content page

Is there a way to call an autocomplete webservice from JavaScript in a content page that is part of the same web app? I have found that when I include a master page, the autocomplete feature stops working. I haven't added a script manager to the maste ...

javascriptjqueryasp.net

The text fields keep duplicating when the checkbox is unchecked

There are check boxes for Firstname, Lastname, and Email. Clicking on a checkbox should display the corresponding input type, and unchecking it should remove the input field. I am also attempting to retrieve the label of the selected checkbox without succ ...

javascriptjqueryhtmlcheckbox

Bootstrap's nested rows do not adhere to the correct width specifications

After reading the post titled How to make a Bootstrap column span multiple rows?, I attempted to replicate the concept but encountered some difficulties. This is what I came up with: https://codepen.io/saka-rauka1/pen/MWodjao?editors=0010 render() { r ...

reactjsbootstrap-4

Identifying PHP post/get variables with jQuery

I am working on a PHP project where I have a form that sends a variable to the same page. I am looking to create a jQuery script that will show or hide a specific div based on the value sent by the form. Here is the form code I have in my PHP file: < ...

phpjqueryforms

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

javascripthtmlvue.js

No matter what, the Django authenticate function will consistently return None

I have been facing challenges in implementing registration/login/logout functionality. While user registration is successful and the user data appears in Django admin as well as in the database, I am encountering issues with the login functionality. Upon c ...

htmldjangopython-3.xdjango-formsdjango-views

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

When activating another function, Javascript failed to trim and hide the div as intended

Before adding another function (*2), my function (*1) was working perfectly. However, after adding the second function, there seems to be a conflict and now it's not working as expected. :( <script type="text/javascript> $(function() { ...

javascriptphpjquery

Unable to receive a response from a webservice using jQuery

Feeling overwhelmed with the task ahead, I have been tasked to create an information system for a heavy machinery rental company that utilizes GPS tracking for each machine. The GPS data is provided by an external firm through web services, and I am strugg ...

phpjqueryweb-servicesgps

Sending a rendered HTML template via email using Flask

I'm currently using Flask to generate an API and passing the data through a rendered template in order to create charts on an HTML page using a Python script. Could you please advise me on how I can send the rendered HTML page, along with all the cha ...

pythonhtmlflaskpyscript

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

Restricting Options in jQuery/ajax选择列表

Although there are similar questions posted, my specific issue is that I am unsure of where to place certain information. My goal is to restrict the number of items fetched from a list within the script provided below. The actual script functions correct ...

javascriptjquerycssajaxhtml-lists

The submit button on the HTML form is not functioning properly and requires activation

Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...

htmlcssformsejs

The curious case of CSS nth-of-type quirks

I am using CSS nth-of-type(even) to organize divs. It usually works fine, but when I send an AJAX request and add new HTML div after another one, the selector starts behaving strangely. .row > .cd-timeline-block-sort:nth-of-type(even) > .cd-timeline ...

htmlcss

Styling the navigation bar using CSS

Currently working on establishing a top menu bar similar to StackOverflow, but with a fixed position for my webpage. Check out the JSFIDDLE Demo here Encountering extra space on the left and top of the menu bar. Seeking advice on how to eliminate this ex ...

htmlcssmenu

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...

javascripthtmlurlhref

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

I have a scenario where I am overlaying icons on an image within my ngForm. The goal is to allow users to drag the icons and save their new location when the form is submitted. Everything works as expected, but I encounter a pesky error whenever the page l ...

htmlangular

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

cssphpstorm

Trigger Element Upon Click

Forgive me in advance for the lack of quality in this question, but I'll proceed anyway: All I want is for an element to slide open when clicked with a mouse! That's all! More specifically, I am looking for a single menu item that, upon clickin ...

javascriptjquery