HTML: fluid container columns not lining up correctly

My Bootstrap code uses the container-fluid class for a full-width container, but the two columns I added are not aligned as intended...

I wanted one column on the right and the other on the very left, but they are not displaying correctly. Can anyone help with this?

.test-shine {
   
   
   background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
    background-repeat: no-repeat;

    height: 500px;

    overflow: hidden;
    display: inline-block;
  }
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
    <link rel="icon" type="image/png" href="./assets/images/letket-creative-logo.png" />
    <title>Digital Group</title>
    <link rel="apple-touch-icon" href="./assets/images/footerlogo.png">
    <link href="assets/css/style.css" rel="stylesheet" />
    <link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1d130f3c4e524f524d">[email protected]</a>/dist/aos.css" rel="stylesheet">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898ecf6e9f6eb">[email protected]</a>/dist/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</section>
    <div class="container-fluid">

        <div class=" firstSection">
            <div class="row mt-5" >

        
                <div class="col firstBlockText">
                    <h4> Welcom To DigitalGroup</h4>

                    <h1>About Digital Group </h1>

                    <div class="row-hr">

                        <hr class="dot-hr">
                        <hr>
                    </div>
                    <p> <b> </b>offering digital and technology
                        investments that deliver sustainable growth yet place equal value on small and large
                        enterprises.
                        <br><br><br>

                        <b>Since 2012,</b> we’re the creator company that produce digital segments. Our success has
                        brought
                        all the digital aspects into one template of DIGITAL GROUP, relying on a team of intelligent,
                        experienced, and specialists in Digital Architecture, Digital Marketing, and Digital e-commerce.
                    </p>

                    <a class="btn btn-outline-dark btn-lg" data-aos="fade-up" data-aos-duration="900" href="about.html">
                        Read more >>


                    </a>
                </div>

                <div class="col test-shine">

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

htmlcssbootstrap-4

Answer №1

</section>
  <div class="container-fluid">

  <style>
 .test-shine {
   
   

    height: 500px;

    overflow: hidden;
    display: inline-block;
  


  }
  img{
    float: right;
  }
  </style>
</head>
<body>
</section>
<div class="container-fluid">

    <div class=" firstSection">
        <div class="row mt-5" >

    
            <div class="col firstBlockText">
                <h4> Welcome To Our Digital World</h4>

                <h1>Discover the Digital Group Experience</h1>

                <div class="row-hr">

                    <hr class="dot-hr">
                    <hr>
                </div>
                <p> <b> </b>embracing digital and technological
                    innovations that foster sustainable growth while catering to businesses of all sizes.
                    <br><br><br>

                    <b>Ever since 2012,</b> we have been shaping the digital landscape through various ventures. Our journey has culminated in the formation of the DIGITAL GROUP, comprised of a team of brilliant minds specializing in Digital Architecture, Marketing, and E-commerce.
                </p>

                <a class="btn btn-outline-dark btn-lg" data-aos="fade-up" data-aos-duration="900" href="about.html">
                    Learn More >>


                </a>
            </div>

            <div class="col test-shine" >
              <img src="https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg" alt="">
   </div>
</div>
    </div>
    </div>

Answer №2

To align the image in your second right container, you can use the position property. Simply add background-position: right; to your .test-shine class.

.test-shine {

  background: url('https://i.pinimg.com/474x/01/88/dc/0188dc41881e0e410b5375cdead5f49a.jpg');
  background-repeat: no-repeat;

  height: 500px;
  width: 500px;
  background-position: right; /* this line is new */
  overflow: hidden;
  display: inline-block;
  
}
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>-->
<link rel="icon" type="image/png" href="./assets/images/letket-creative-logo.png" />
<title>Digital Group</title>
<link rel="apple-touch-icon" href="./assets/images/footerlogo.png">
<link href="assets/css/style.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c8c6dae99b879a8798">[email protected]</a>/dist/aos.css" rel="stylesheet">
<!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com">-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fce6f9e6fb">[email protected]</a>/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"></section><div class="container-fluid">

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

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Currently, I am utilizing ng-bootstraps datepicker to showcase user data on a daily basis. I have implemented a custom day template to apply specific CSS classes. <ng-template #customDay let-date> <div class="custom-day" [ngCla ...

cssangulartypescriptdatepickerng-bootstrap

What is the best way to split two divs in this manner?

Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...

htmlcssmaterial-uicss-selectorstailwind-css

Choosing checkboxes, radio buttons, and lists

Having difficulty with dynamically checking/selecting radiobuttons, checkboxes, and list styles using jQuery/jQuery Mobile. I have a collection of checkboxes, radio buttons, and select menus. My goal is to fetch the value from the database and automatical ...

javascriptjqueryhtmljquery-mobile

fixed div with scrolling content

My dilemma involves a menu located within a div on the side of the browser that I want to keep fixed in position. However, there is a concern that the height of the menu might exceed certain screen sizes, making links inaccessible. To address this issue, I ...

htmlcss

How to enable seeking functionality for mp3 files with PHP

I have implemented the following PHP script: video tags are unable to extract metadata from it. Any insights on where I might be going wrong and how to rectify this situation? Your guidance would be greatly appreciated. Thank you.</p> ...

phphtml

Is it possible to transfer data from a JavaScript file to the Express server without relying on a form submission?

As a newcomer here, I apologize if I overlook any best practices. Currently, I am in the process of developing a sudoku game using express, JavaScript, HTML, and mongoDb. My current challenge involves setting up a statistics system. My goal is to send da ...

javascripthtmldatabaseexpressejs

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

How can we verify that the CSS styles are correctly applied to the specified HTML elements during testing (Unit/Integration)?

Currently, I am engaged in testing views using Cucumber and Rails, and so far, the experience has been very enjoyable. The following steps can easily be executed: Background: Given I am logged in as a customer Scenario: View the Welcome Page When I na ...

ruby-on-railscsstddselenium

Discover the magic of gradients in tooltips with Bootstrap 5!

I recently encountered some challenges when attempting to apply a gradient color to bootstrap 5 tooltips CSS: .tooltip .tooltip-arrow::before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-toolt ...

htmlcsssasstooltipbootstrap-5

utilizing a for-each loop in order to append upcoming events to a fully

I am currently using the FullCalendar jQuery component and attempting to add events to it by iterating through a loop of divs, but for some reason it is not working as expected. Below is the snippet of JavaScript code that I am struggling with. The commen ...

phpjqueryhtmlwebfullcalendar

Executing a JavaScript function across multiple elements: A step-by-step guide

I recently came across this code snippet on w3schools.com: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, ...

javascripthtmlcssimagegallery

How can you implement a repeating carousel with JavaScript?

I recently came across some carousels on and was intrigued by how they smoothly repeat the slides. Instead of jumping back to the first slide when reaching the end, it seamlessly transitions from the final slide back to the first one. I am eager to learn ...

javascripthtmlcsscarousel

JavaScript code designed specifically for Chrome browser that enables dragging functionality for div elements, unfortunately, it does not function on Firefox

Do you have a moment to help me with a small issue? I created a script that allows you to change the position of a div by dragging it. The script works perfectly in Chrome, but unfortunately, it's not working when I try it in Firefox. var h = windo ...

javascripthtmlcsscross-browser

How to Display JavaScript Error Messages Beside an HTML/JSP Input Field with CSS

Hey there! I've got a simple CRUD input form with Javascript validation. When an error occurs, the error message pops up below the input field in red text. I've tried various methods like floats and adjusting margins, but nothing seems to work. ...

javascripthtmlcssjsp

Increase all numeric values in the table by a factor of 3.8

If you're looking for my table, it can be found at http://jsfiddle.net/wqk7Lauz/ On page load, all I want is for the values in td:nth-of-type(3) to be multiplied by 3.8. This is the HTML code snippet: $('td:nth-of-type(3)').text(parseFl ...

phpjqueryhtmlhtml-table

Having difficulty aligning Bootstrap elements with my custom CSS

My attempt to align my search bar with the "Art Store" text on the same vertical level has been unsuccessful so far. <div id="logoRow" > <h1>Art Store</h1> <form class="searchBar"> ...

htmlcssbootstrap-4

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

javascripthtmlcssjscolor

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Enhance ng-grid with row expansion and collapse feature

I am looking to create a feature in ng-grid that allows for expanding and collapsing rows, similar to what is demonstrated here http://datatables.net/examples/api/row_details.html. If you click the "plus icon," more details are revealed. I found a related ...

javascriptjqueryhtmlangularjsng-grid

The iOS website won't fully load until the button is tapped two times

- (IBAction)saveButton:(id)sender { NSURL *yourWebURL = [NSURL URLWithString: webpageURLLabel.text ]; NSURLRequest *webRequest = [[NSURLRequest alloc] initWithURL:yourWebURL]; if ([self checkIfValidURL] == YES) { [webpagePreview loadReq ...

iphonehtmliosuiwebviewnsstring