Bootstrap's container class isn't functioning correctly

I am currently working with the 3.3.6 version of Bootstrap in the dist folder. Inside this folder, I have an index.html file that contains the following code. However, it seems to not be functioning correctly. Alongside the index.html file, there are also css, js, and font folders.

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

<head>
  <meta charset="utf-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js"></script-->
  <script src="js/jquery/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-mid-4">Left Side </div>
      <div class="col-mid-4">Middle</div>
      <div class="col-mid-4">Left Side </div>
    </div>

  </div>


</body>

</html>

Answer №1

Remember to use col-md-* instead of mid

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
     <div class="col-md-4">Left Side </div>
     <div class="col-md-4">Middle</div>
     <div class="col-md-4">Right Side </div>
   </div>
</div>

Answer №2

Here is the solution:

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>

<body>
  <!--h1 class="text-primary">Hello, world!</h1-->
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-md-4 col-sm-4 col-lg-4">Left Side </div>
      <div class="col-xs-4 col-md-4  col-sm-4 col-lg-4">Middle</div>
      <div class="col-xs-4 col-md-4 col-sm-4 col-lg-4">Right Side </div>
    </div>

  </div>


</body>

</html>

For more information, visit: https://jsfiddle.net/x4qapovk/3/

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

Difficulty encountered when trying to update a re-updated HTML DOM using Flask

I have a flask dropzone for file uploads, and after each upload I want to display a log text on the website. While it currently works, there is an issue where the log text does not update after the second upload. The website continues to show the text from ...

how to dynamically update a button's text using Vue.js

I have a challenge where I need to dynamically change the text of a button based on whether a value is true or false. Below is the code snippet that I have been working on: <button class="btn btn-primary table-button" type="button&quo ...

Tips for adding data to an array while iterating through an object:

I have a task of looping through object results fetched from an API and pushing them into an array. historys: any = []; Here is how I am attempting to loop through the objects: Object.keys(response['orderdetail']).forEach(function(index, key) ...

Enhance Your Data Visualization with jqplot Bar Chart Hover Feature

I am looking to add a tooltip div directly above the value of my bar chart. For example, if the bar values are around 90 and 80, on mouse-over the [value box] should appear right above the value of the current bar in the chart. Is there a way to position ...

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

I am currently working on customizing a header with Bootstrap 4 alpha. <div class="container"> <div class="row"> <div class="col-md-6 text-md-left text-center"> <div class="navbar-brand"><img src="/wp-con ...

Bootstrap 4 Table with Irregular Stripes to Avoid

<html> <head> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/sb-admin.css" rel="style ...

Body of the table spanning the entire width of the screen

Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...

Create fluidly changing pictures within varying div elements

Hello there! I have a form consisting of four divs, each representing a full page to be printed like the one shown here: https://i.sstatic.net/w7N6E.png I've successfully created all the controls using AJAX without any issues. Then, I load the image ...

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

A URL that quickly updates live content from a backend script

As a beginner, I am seeking guidance as to where to start on my journey of learning. I need assistance in creating a script that can efficiently fit within a small URI space and constantly updates itself with information from a server script. My target bro ...

Struggling to dynamically include an identifier to a div element within a Rails helper function

I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...

Json file directory path

Here is a display of paths: var paths = [ "ubx/ubx-producao/Editora Abril/Exame 1106/FINANCAS_INOCAVAO_STARTUP_BANCOES.mp3", "ubx/ubx-producao/Editora Alto Astral/Previsoes signos Fevereiro 2016/aquario-fevereiro.mp3", "ubx/ubx-producao/Editor ...

Having issues with Angular when dealing with loading a div through the jQuery load function

I am facing an issue with my master page that includes a script for angularJs and a div serving as a parent div to load an html page developed using Angular. MainPage.aspx <script src="../../Scripts/angular.min.js" type="text/javascript"></scrip ...

Use Jquery to verify whether a specific Div element does not have any children elements with a particular

Here is my HTML code: I'm looking to use JQuery to check if the divChatWindow element does not have any child elements with the id of li. How can this be accomplished? ...

Stop users from inserting any script/jquery/sql injections in the description text field

My goal is to implement validation on the description field in order to detect any scripting, JavaScript, jQuery, or SQL query code instead of a genuine product description. // Validation for disallowed patterns (JavaScript, jQuery, and SQL) $disallowedPat ...

Designing the footer for small devices using Bootstrap 4, including layout, responsiveness, and hiding functionalities

Just diving into the world of Bootstrap 4 and facing a challenge with my page footer layout. I have a mockup that I'm trying to replicate: https://i.sstatic.net/pXyMR.png This is what I've come up with so far: index.html (snippet): <!-- foo ...

Achieving the perfect display on your ASP.NET Core MVC web application

After successfully completing the movies tutorial, I have enhanced it by adding two dropdown filters and a search box. However, I'm facing difficulty in arranging these three elements evenly across the top of the output view. Here is a link to get sta ...

Send form information using the REST method

Can someone provide guidance on how to properly handle this endpoint in my code? @PostMapping("/createUser") public ResponseEntity<User> createUser(@RequestBody User user) {...} I am looking to implement a user creation feature on my HTML ...

What is the process for populating the Body placeholder in asp.net Core MVC?

After reviewing a tutorial, I discovered that the RenderBody method is supposed to display views within the designated placeholder of the layout, as illustrated in this diagram: https://i.sstatic.net/nJLUm.png However, in practice, it did not work exactl ...

Transforming JSON data into an interactive table with HTML

After spending four days searching for a solution, I am still unable to figure out my problem. My goal is to convert a JSON string data retrieved from a URL into a dynamic table using JQuery and JavaScript. To achieve this, I need to load the JSON string ...