Are the Bootstrap columns arranged in a vertical stack instead of side by side?

I currently have two large columns that are stacked vertically on top of one another. I want them to be side by side, like | 1 | 2 |, so that the user can view both columns simultaneously. I am seeking tips or suggestions on how to resolve this issue. While I can't post all of my code here, I will provide the main divs. There are multiple tabs that switch between pages for the user. It was working fine before, but now the right column seems to have dropped below the left column.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4908a928a95">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid" style="max-width: 95%;">
  <ul class="nav nav-tabs" id="allTabs" role="tablist">
    <li class="nav-item"><a class="nav-link" id="homePage" href="#" onclick="alertFunction()">EBSP Home</a></li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="tv" onClick="openTab(event, 'tv_systems')">FM Broadcast</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="transline" onClick="openTab(event, 'transmission')"> Transmission Line & Power Analysis</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="print" onClick="openTab(event, 'print_pdf')">Print</button>
    </li>
  </ul>
  <!-- tv systems tab -->
  <form target="_blank" method="post">
    <div class="tabContent" id="tv_systems">
      <div class="row">
        <div class="col-sm">
          <!-- main left column -->
          <div class="row align-items-start">
          </div>
        </div>

        <div class="col-sm">
          <!-- Second Column right -->
        </div>
      </div>
    </div>
    <div id="pageValidation" class="errorText"></div>
  </form>
</div>

javascripthtmlcssbootstrap-4

Answer №1

To achieve vertical alignment, make sure to include the bootstrap link in the header of your HTML document.

<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.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a061a1a04195651405505">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid" style="max-width: 95%;">
  <ul class="nav nav-tabs" id="allTabs" role="tablist">
    <li class="nav-item"><a class="nav-link" id="homePage" href="#" onclick="alertFunction()">EBSP Home</a></li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="tv" onClick="openTab(event, 'tv_systems')">FM Broadcast</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="transline" onClick="openTab(event, 'transmission')"> Transmission Line & Power Analysis</button>
    </li>
    <li class="nav-item">
      <button type="button" class="nav-link" id="print" onClick="openTab(event, 'print_pdf')">Print</button>
    </li>
  </ul>
  <!-- tv systems tab -->
  <form target="_blank" method="post">
    <div class="tabContent" id="tv_systems">
      <div class="row">
        <div class="col-sm">
          <!-- main left column -->
          <div class="row align-items-start">
          </div>
        </div>

        <div class="col-sm">
          <!-- Second Column right -->
        </div>
      </div>
    </div>
    <div id="pageValidation" class="errorText"></div>
  </form>
</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

Hide the external div if the tab is active in Angular Bootstrap

How can I determine if a specific tab is active and then hide a div outside all tabs when it is active? Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview <div class="border"> Conceal me when Tab #3 is active. </div> < ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-ui-bootstrap-tab

Problem with targeting the .prev() and closest() class of a text input box

Could you please review This Demo and advise why I am unable to select the first .fa class before the text box #name ? This is what I have been trying: $(this).prev().closest(".fa").addClass("err"); within this code block <div class="row"> & ...

javascriptjquery

There seems to be a display issue with the DataTables tables

Utilizing Bootstrap 4, I followed the example provided by DataTables on their website: link. The specific code that was implemented can be found here: link Take a look at how it appears: http://pastebin.com/HxSNUnLq Any suggestions on how to resolve th ...

javascriptjquerycssdatatabletwitter-bootstrap-4

Ajax response values overlap

I am developing an application that requires multiple Ajax requests, but I encountered a problem where I am receiving the same response values for both requests. Each request must include a data field called activityCode, yet I keep getting the value of Sc ...

javascriptphpjqueryajax

The object for checking Ajax connections is not providing any values

I've been working on creating a unique AJAX connection check object, but unfortunately I'm struggling to get it to function properly. :/ Here's the object structure: function Connection(data){ this.isConnected = false, this.check = funct ...

javascriptjqueryajax

How can I prevent anchors from performing any action when clicked in React?

My dilemma involves this HTML element: <a href onClick={() => fields.push()}>Add Email</a> The purpose of the href attribute is to apply Bootstrap styles for link styling (color, cursor). The issue arises when clicking on the element caus ...

javascripttwitter-bootstrapreactjsbootstrap-4

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally: .form-holder{ padding-left: 20px; width: auto; background: ; overflow-x: auto; max-height: 300px; padding-bottom: 30px; } Every ...

jquerycss

Preventing FlatList from scrolling when re-sizing

Resizable from the re-resizable package is causing my Flatlist not to scroll properly. Despite having enough elements to trigger scrolling, it fails to do so when the resizable element is present. This issue does not occur when the resizable element is rem ...

javascriptreactjsreact-nativejsxresizable

What is the best way to use res.sendFile() to serve a file from a separate directory in an Express.js web application?

I have a situation within the controllers folder: //controler.js exports.serve_sitemap = (req, res) => { res.sendFile("../../sitemap.xml"); // or // res.send(__dirname + "./sitemap.xml") // But both options are not working }; ...

javascriptnode.jsexpress

The ng-click method on the checkbox input field in AngularJS is not being triggered

I'm trying to trigger a function in a toggle switch using ng-click, but the customerActiveDeactive function isn't being executed. <a title="Active/ Deactivate" > <input type="checkbox" class="js-switch" ng-init="status=True" ng-model ...

javascriptangularjs

Javascript object attributes

Could you retrieve the value of one object property based on the value of another property? For instance, in an SQL query, is it possible to fetch the id from the object where the object.name equals "somename"? I am trying to obtain the id of a particula ...

javascriptobject

Direct users to a different page upon reloading the page in Django

Currently working on a web application with the Django framework. In one of the forms in my app, I am looking to automatically redirect to a new page upon reloading the current page, rather than when the form is submitted. Any insights from the community w ...

javascriptdjango

The behavior of Ajax is resembling that of a GET method, even though its intended method

Greetings, I am currently facing an issue while coding in Javascript and PHP without using jQuery for Ajax. My aim is to upload a file over Ajax and process it in PHP. Here is the code snippet: index.html <html> <head> <title>PHP AJAX ...

javascriptphpajaxpostget

I am experiencing difficulty getting my component to properly implement the bootstrap NavBar and NavIcon styles

I am new to using bootstrap with react and I am facing an issue where the dimensions are not being applied to my Navbar and Navbar Icon. I have already installed dependencies and used className instead of class, but still no changes are visible. import Re ...

javascriptreactjsbootstrap-4

Utilizing an array to pass a series of items to a function parameter

I am currently working on an Angular project that involves a controller and service. In this setup, the controller sends data and an endpoint to the service. As of now, the service handles the http request. However, I am in the process of refactoring my ...

javascriptarraysangularjsperformancejavascript-objects

NodeJS Socket not transmitting file after connection with client

Having scoured the depths of various resources, including SO and Google, I have hit a roadblock. I am struggling to understand why the socket is failing to capture the uploaded file via the form; it simply stops after connecting. When I check the console, ...

javascriptnode.jsexpresssocket.io

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

Applying CSS Styles to a Single Class Only

I have been using Zurb's Foundation to customize the navbar with my own styles, which has been successful so far. However, I encountered an issue with the responsive behavior of the navbar when the viewing container size changes. The navbar adds a sec ...

csszurb-foundation

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...

htmlcsstextrotation