I'm trying to align two columns side by side within a row using bootstrap, but they are continuously stacking on top of each other. Any ideas on

Why won't my columns align next to each other? They just end up stacked on top of each other.

.col-sm-4{
  background-color: black;
  opacity:0.9;
  height: 100%;
  margin: auto;
  position: absolute
}

.container-fluid{
  padding: 0;
}
.row{
  margin: auto;
}

.col-sm-8{
  background-color: darkred;
  opacity: 0.9;
  position: absolute;
  text-align: right;
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
      <div class="row">
          <div class=" col-xs-2 col-sm-4 col-lg-2">


          </div>

          <div class="col-xs-10 col-sm-8 col-lg-10" >


          </div>
      </div>
      </div>

htmlcssbootstrap-4

Answer №1

If you eliminate the CSS property position: absolute; from both .col-sm-4 and .col-sm-4, your task will be completed successfully.

To view the outcome, please visit this link: https://jsfiddle.net/yz96fgje/

Answer №2

Just a friendly reminder that Bootstrap 4 prioritizes mobile-first design. This means that using col-xs-2 won't work as intended. Instead, opt for col-2 which will be effective from 0px up until the next defined breakpoint like col-sm-4 in your specific case.

Additionally, there's no need for additional CSS; you can simply remove it altogether. Keep in mind that col-xs has been removed from Bootstrap 4.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class=" col-2  col-sm-4 col-lg-2">
      Hi 1
    </div>

    <div class="col-10 col-sm-8 col-lg-10">
      Hi 2
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15657a656570673b7f6655243b24233b24">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

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

Allow the table headers to be flexible and accommodate extended names in the rows

<div class="container"> <div class="table-responsive"> <table class="table" width="100%" > <thead> <tr> <th class= "style6" >Year</th> <th class="styl ...

htmlcss

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

Manipulate Elements with jQuery: Adding a Class to a Child Element

HTML: <div class="cell-container"> <img src="image.png" class="thumbnail" /> </div> CSS: .hover { background-color: silver; } .hover-image { border: 1px solid #000; } jQuery: $(".cell-container").mouseover(function() { $(th ...

jqueryhtmlcss

Utilizing the Mouse Hover feature to target various <div id> elements within a single Vue.js function

I have created two div IDs in an HTML file where I have specified the mouseover property. <div id="app"> <img class="img-responsive img-full" v-bind:src="imgData" @mouseover="imgData = imgData_1"> </div> <div id="app1"> <img cl ...

htmlvue.jsvuex

Changes in styling applied via ajax are only supported by Webkit when resizing the browser window

Can you help point me in the right direction? It's been bothering me for quite some time now. In my content editor (using javascript + jquery), I have the ability to change fonts on the fly. Whenever a font is changed in the editor, an ajax request is ...

javascriptjqueryhtmlcssajax

Error message: Issue encountered while rendering Angular Bootstrap accordion template

Despite my attempts to find a solution before reaching out for help, I am struggling to get the accordion feature to work in my Angular and Bootstrap application utilizing ui.angular.js. The error message in the developer tools indicates an issue with the ...

htmlangularjstwitter-bootstrap-3accordion

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

Below is a JavaScript function I have created to hide an HTML tag: function hideObject(objectId) { var obj = document.getElementById(objectId); if (obj) { obj.style.display = "none"; } } I encountered a strange issue when using this ...

javascripthtmlinternet-explorercross-browser

The Codepen demo for SemanticUI is not functioning properly

Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...

javascripthtml

The primary container is brimming with an abundance of content

Can anyone help me with a CSS issue I'm experiencing in the latest versions of Chrome and Firefox? I can't seem to figure it out on my own. The problem arises with a container div that has a 50px top margin. Inside this container, there's a ...

htmlcss

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue

Determine the size of a file in either megabytes or kiloby

I need to determine the size of a file in either megabytes if the value is greater than 1024 or kilobytes if less than 1024. $(document).ready(function() { $('input[type="file"]').change(function(event) { var _size = this.files[0].si ...

javascriptjqueryhtml

Place an element in the middle of the svg

I have a D3.js svg element measuring (1000,1000) with a circle positioned randomly, such as (100,200). My goal is to adjust the svg so that the circle is centered at (500,500). I want to create a function that can do this for any randomly positioned circl ...

javascripthtmlcssd3.jssvg

another option besides the nextElementSibling

I have a unique code that applies a style to the following div when another div is clicked, using nextElementSibling. var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("clic ...

javascripthtmljquerycss

In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

In my HTML form, users can input their first name, last name, and phone number to create an account ID. The textboxes for first name, last name, and account ID work smoothly on all browsers except Firefox. Surprisingly, the phone number textbox doesn' ...

javascripthtmlcss

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

javascriptjqueryhtmlcsshighcharts

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

What is the reason behind Firefox opting for a 2x image while Chrome goes for a 1x image when the devicePixelRatio is 1

When deciding between 1x and 2x options: Firefox will opt for 2x if devicePixelRatio is less than 1 Chromium will choose 2x if devicePixelRatio is less than 1.5 Testing this in Safari is tricky as devicePixelRatio remains constant even when scaling t ...

htmlimagefirefoxchromiumsrcset

Access the image located in the parent directory of public_html

Users can easily upload photos on my website. The file upload code is located in public_html/fileupload.php The path in the fileupload.php file is ../user_upload/abc/ Even though I created the folder user_upload/abc, my HTML cannot display the images fro ...

phphtml

Struggling with transitioning from table layout to CSS, specifically encountering difficulty in aligning all elements properly

Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the ...

css

Is there a way to trigger a CSS3 animation to play when scrolling down and then play in reverse when scrolling up?

Using a blogger website, I have successfully set up sticky navigation. However, when scrolling back up, the navigation bar pops back into place without any animation. I am looking for a solution to smoothly return the navigation bar to its original positio ...

javascriptjqueryhtmlcss