utilize bootstrap to align text at the end of columns within a row

How can I use Bootstrap 5 to arrange a div and a canvas in a row until the md breakpoint?

I want the canvas to align immediately after the text ends, currently each part has equal width.

Is there a way to remove the unused space from the div?

https://i.sstatic.net/C9W4G.png

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


 <section class="p-5">
      <div class="container">
        <div class="row g-4 bg-primary">
          <div class="col-md-6">
            <div>
              <p>
                first stuff
                <span>hi</span>
              </p>
              <p>
                second stuff
                <span>hii</span>
              </p>
              <p>
                third stuff
                <span>hiii</span>
              </p>
              <p>global stuff <span>hello</span></p>
            </div>
          </div>
          <div class="col-md-6 bg-dark">
            <canvas></canvas>
          </div>

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

htmlcssbootstrap-4bootstrap-5

Answer №1

To update the size specified after md in the colon property of both classes and is necessary. Here's the code snippet with the required changes:

<html>
<head>
<!--<meta name="viewport" content="with=device-width, initial-scale=1.0">-->
<title>Header</title>
<link rel="stylesheet" href="style.css" />

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght@300;500;700&display=swap rel="stylesheet">
<link
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd3cdd1">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
</head>
<body>
<section class="p-5">
  <div class="container">
    <div class="row g-3 bg-primary">
      <div class="col-md-3">
        <div>
          <p>
            first stuff
            <span>hi</span>
          </p>
          <p>
            second stuff
            <span>hii</span>
          </p>
          <p>
            third stuff
            <span>hiii</span>
          </p>
          <p>global stuff <span>hello</span></p>
        </div>
      </div>
      <div class="col-md-9 bg-dark">
        <canvas></canvas>
      </div>
    </div>
  </div>
</section>

Answer №2

Modify Class col-md-6 to 

<div class="col-md-auto">
& 
<div class="col bg-dark">

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


 <section class="p-5">
      <div class="container">
        <div class="row g-4 bg-primary">
          <div class="col-md-auto">
            <div>
              <p>
                first stuff
                <span>hi</span>
              </p>
              <p>
                second stuff
                <span>hii</span>
              </p>
              <p>
                third stuff
                <span>hiii</span>
              </p>
              <p>global stuff <span>hello</span></p>
            </div>
          </div>
          <div class="col bg-dark">
            <canvas></canvas>
          </div>

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

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

Stop and resume CSS animation when the user hovers over and leaves

Can you share some insights on how to pause and resume a CSS transition? Check out the code below: animationstate = "running"; function animate() { if (animationstate == "running") { deskppssystemdiv.style.transitionDuration = "2000ms"; ...

javascriptcsscss-animations

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...

javascriptjqueryhtmlhandsontable

Move a div by dragging and dropping it without creating duplicates

I'm in need of some assistance. It seems like a simple task, but I'm having trouble finding a solution. I've managed to create draggable elements that work smoothly without any issues. The drag and drop functionality is working perfectly. ...

javascripthtmlcss

Adding the AJAX response to the specified element's ID

I'm having trouble inserting radio buttons into a <div> on my page using an AJAX response. The code I have looks like this: // AJAX form for updating tests after category selection $('#categories').change(function(){ category_id ...

javascripthtmljquery

What is the best way to arrange these containers in a horizontal stack?

Check out the code snippet at: https://codepen.io/shayaansiddiqui/pen/YzGzeOj I'm looking to align these boxes horizontally, how can I achieve that? <div> <div class="container"> <img src="#" ...

htmlcss

Guide on exporting Excel data using Angular and TypeScript

My project involves managing a table of information that includes fields for FirstName, LastName, PhoneNumber, Age, and Date. I've created a function that allows me to export the data to an Excel file, but I only want to export specific fields like Fi ...

htmlcssangulartypescript

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

javascripthtmlangularjsjson

Position the icon to the left within a bootstrap 5 card

Struggling with alignment in Bootstrap 5, facing two issues: 1- How to align my icon with the left border of the card body? 2- Increasing the icon size affects the vertical alignment of my card item (see image below) https://i.sstatic.net/dR7DD.png Try ...

htmlcssalignmentbootstrap-5

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone

Currently, I am in the process of developing mobile web applications utilizing jquery mobile and HTML 5. I am working on a feature that requires access to the camera. In order to achieve this functionality, I have integrated the following plugin: While ...

jqueryhtmlmobilewebcam

Utilizing CSS3 to perform multiple 3D rotations

I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...

google-chromecsswebkitwebkit-transform

Creating characters dynamically based on the length of user input in VSCode Snippet

Here is a simple vue-html snippet: { "BANNER1": { "prefix": "banner", "body": ["<!-- ----------------", "/// $1", "--------------------- -->"] } } This sni ...

htmlvue.jsvisual-studio-codevscode-snippets

Utilizing Django fixtures: Importing HTML content as JSON into a Text Field

Currently in the process of transitioning my website to Django from another content management system, I am facing challenges with importing HTML into Django using fixtures. The specific issue revolves around "Events", which is a model within my Django app ...

pythonhtmljsondjangofixtures

The chosen filter will be displayed in the list of active filters

My website displays various products, and like many other similar sites, I am attempting to implement filters for the search results. One of the filters I have is for colors. I am showcasing color thumbnails, and when a user selects a color thumbnail, the ...

phphtml

Ways to evaluate the amount of traffic on a webpage?

Recently, I encountered an issue while creating a page to showcase blog posts. Each post had the typical social media share buttons like "Facebook like," "tweet this post," and "+1." Additionally, there were some extra JavaScript functions added for variou ...

javascripthtmldebugging

Steps for disabling automatic formatting in Visual Studio Code Version 1.35.1 with system setup

I am currently utilizing visual studio code for my Node JS application with mustache templating. In one of my HTML files, I have the following code: <script> {{{interface}}} </script> After the automatic formatting on save, it appears like t ...

htmlnode.jsvisual-studio-codemustache

On what occasion is a DOM element considered "prepared"?

Here's a question that might make you think twice: $(document).ready(function() { }); Sometimes, the simplest questions lead to interesting discussions. Imagine having a list of elements like this: <body> <p>Paragraph</p> < ...

javascriptjqueryhtml

I'm running into an issue where I am unable to retrieve a variable from a separate

Struggling to populate a dropdown menu as I keep encountering an undefined error for all currencies when trying to reference them. A third party provided me with this code to simply fill the dropdown and make some text edits, but I'm puzzled as to wh ...

javascripthtml

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

cssvue.jssassvue-componentvuetify.js

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

javascriptcss

Where can I find the CSS classes for Material-UI?

I am new to Material UI and I want to explore its grid examples. However, when I tried coding the example provided below, it gave me an error saying that there was no CSS file found to load for these examples. Without including the className parameter, I ...

cssreactjsmaterial-ui