<html>

<head>
  
  <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">
</head>

<body>
  
  <h3 class="bg-dark text-light">
    Example of justify-content-start
  </h3>
  <div class="d-flex justify-content-start">
    <button class="m-1 btn btn-success">
      Notifications
    </button>
    <button class="m-1 btn btn-info">
      Requests
    </button>
    <button class="m-1 btn btn-warning">
      messages
    </button>
  </div>
  <br>

  
  <h3 class="bg-dark text-light">
    Example of justify-content-end
  </h3>
  <div class="d-flex justify-content-end">
    <button class="m-1 btn btn-success">
      Notifications
    </button>
    <button class="m-1 btn btn-info">
      Requests
    </button>
    <button class="m-1 btn btn-warning">
      messages
    </button>
  </div>
  <br>

  
  <h3 class="bg-dark text-light">
    Example of justify-content-center
  </h3>
  <div class="d-flex justify-content-center">
    <button class="m-1 btn btn-success">
      Notifications
    </button>
    <button class="m-1 btn btn-info">
      Requests
    </button>
    <button class="m-1 btn btn-warning">
      messages
    </button>
  </div>
  <br>

  
  <h3 class="bg-dark text-light">
    Example of justify-content-between
  </h3>
  <div class="d-flex justify-content-between">
    <button class="m-1 btn btn-success">
      Notifications
    </button>
    <button class="m-1 btn btn-info">
      Requests
    </button>
    <button class="m-1 btn btn-warning">
      messages
    </button>
  </div>
  <br>

  
  <h3 class="bg-dark text-light">
    Example of justify-content-around
  </h3>
  <div class="d-flex justify-content-around">
    <button class="m-1 btn btn-success">
      Notifications
    </button>
    <button class="m-1 btn btn-info">
      Requests
    </button>
    <button class="m-1 btn btn-warning">
      messages
    </button>
  </div>
</body>

</html>

document.addEventListener("DOMContentLoaded", function () {
  pTag = document.querySelector("div");
  newVal = document.createElement("p");
});

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

var TestResult = function() {
  this.succeeded = false;
  this.reason = "";
  this.input = "";
  this.expected_output = "";
  this.actual_output = "";
};

var executeTests = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];

  const jsdom = require("jsdom");
  const { JSDOM } = jsdom;
  const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

  const pTag = dom2.window.document.querySelector("p");

  const result = new TestResult();
  result.expected_output = "Hello World";
  result.input = "Html page";

  if (!pTag) {
    result.actual_output = "null";
    result.succeeded = false;
    result.reason = "No p tag found";
  } else {
    const pTagText = pTag ? pTag.textContent : "";
    result.actual_output = pTagText;
    if (pTagText.trim() != "Hello World") {
      result.reason = "Expected output (Hello World in a p tag) did not match";
      result.succeeded = false;
    } else {
      result.succeeded = true;
      result.reason = "Found p tag with Hello World";
    }
  }

  results.push(result);

  return results;
};

// Async Tests Example
/*
var executeTestsAsync = function(
  userJsCode,
  userCssCode,
  userHtmlCode,
  userHtmlPage
) {
  var results = [];
  return new Promise(resolve => {

    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;
    const dom2 = new JSDOM(userHtmlPage, { runScripts: "dangerously" });

    if (!dom2.window.onModulesLoaded) {
      console.log("window.onModulesLoaded not found!");
    	resolve(results);
    }
    dom2.window.onModulesLoaded.then(()=>{
      const pTag = dom2.window.document.querySelector("p");

      const result = new TestResult();
      result.expected_output = "Hello World";
      result.input = "Html page";

      if (!pTag) {
        result.actual_output = "null";
        result.succeeded = false;
        result.reason = "No p tag found";
      } else {
        const pTagText = pTag ? pTag.textContent : "";
        result.actual_output = pTagText;
        if (pTagText.trim() != "Hello World") {
          result.reason = "Expected output (Hello World in a p tag) did not match";
          result.succeeded = false;
        } else {
          result.succeeded = true;
          result.reason = "Found p tag with Hello World";
        }
      }

      results.push(result);
      resolve(results);
    });
  });
};
*/

codemirror

What is justify-content in Bootstrap 4?

Align items along the main flex axis with Bootstrap 4 justify-content utilities: start, end, between, center, around.

What is justify-content in Bootstrap 4?

Code

Explanation