Trouble with Bootstrap/CSS division not aligning left or right

I'm struggling to make my divs float left for the first one and then float right for the second one, and so on. I've attempted using float and also tried Bootstrap 5 float options, but neither seems to work. I've searched online for solutions but haven't found anything that works.

The initial idea was to have a background image, but for now, I'm simply using colored divs - red and blue.

Any assistance would be greatly appreciated!


/*Main*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   overflow-x: hidden; 
   background-color: #0f2471;
   font-family: 'Poppins', sans-serif;
}
... (CSS code continues)


<!DOCTYPE html>
<html>
<head>
   <title>Testing</title>
   <!-- CSS -->
   <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd7cbd5c887809184d4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

   ... (HTML code continuation)

<body>

<!-- Specific design elements continue here -->

</body>
</html>
javascripthtmlcssbootstrap-5

Answer №1

If I understand correctly, your question can be answered in a similar way to this:

#fire-truck-div{background: red; color: #FFF;}
#police-car-div{background: blue; color: #FFF;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0">
  <div class="row g-0">
     <div class="col-6">
       <div id="police-car-div" class="text-center">
         <h2 class="" style="text-decoration: underline;">Lorem, ipsum.</h2>
         <p class="px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
       </div>
     </div>
  </div>
  <div class="row g-0">
     <div class="col-6 offset-6">
       <div id="fire-truck-div" class="text-center">
         <h2 class="" style="text-decoration: underline;">Lorem, ipsum.</h2>
         <p class="px-4 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
      </div>
    </div>
  </div>
</div>

Answer №2

Consider using flex or div row col classes instead of relying on float to improve your layout.

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

typescriptUsing redux: prevent parent component from accessing redux props

I'm currently using redux and typescript in my webapp project. What's the best approach for defining props in a component that receives redux-actions through @connect, as well as props from its parent? // mychild.tsx export namespace MyChildCom ...

javascriptreactjstypescriptreduxreact-redux

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show

Image not displayed after uploading to presigned AWS S3 URL in React Native

I've been attempting to upload an image to AWS S3 in my React Native app (expo managed workflow) but I keep encountering the issue of the file being empty. Strangely, there are no errors thrown during the process. Even after trying to use the Uppy AWS ...

javascriptreactjsamazon-web-servicesreact-nativeamazon-s3

What is the correct way to start a typed Object in TypeScript/Angular?

As I delve into the world of Angular and TypeScript, I am faced with a dilemma regarding how to initialize an object before receiving data from an API request. Take for instance my model: //order.model.ts export class Order { constructor(public id: num ...

javascriptangulartypescript

Are camera controls determined by the size of the object's bounding box?

I am facing a challenge with the normal orbit controls from three.js when it comes to long objects, especially at close zoom levels. I am in search of a solution to address this issue. It's difficult to explain in words, so please take a look at this ...

javascript3dthree.js

Building a TTL based schema in NestJs with MongooseIn this guide, we will explore

In my NestJs(TypeScript) project, I am attempting to create a self-destructing schema using the mangoose and @nestjs/mongoose libraries. Unfortunately, I have been unable to find a clear way to implement this feature. While I know how to do it in an expres ...

javascriptnode.jstypescriptmongoosenestjs

Instructions on accessing the subsequent li a starting from a designated location

My goal is to change the link color of the button with the id #idIMMUNOLOGY_9, which has the class .active_default, but I must start from the element with the id #idTERRITORIAL_8. I attempted this approach : $('#idTERRITORIAL_8').parent().find( ...

javascriptjquery

What is the process of connecting to an Embed object in HTML?

How can I create a HTML link for an Embed object that displays a video stream, so that when a user clicks on the link, it opens another window to show the video? <embed id="player" src="http://media2.wtnh.com/_local/livestreams/FMLPlayer.swf" align="ce ...

htmlhyperlinkembedded-resource

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

javascriptjqueryjsongrouping

Alternative image to be used as background if the default image is not available

I am looking to designate an image as a background, but the image file may be named either bg.png or bg.jpg. Is there a way without using JavaScript to set up a fallback option for an alternate image if the default background image is not available? body ...

htmlcssbackground

Conceal the parent element if there are no elements present within the child element

Look at the markup provided: <div class="careersIntegration__listing" id="careers-listing"> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegrat ...

javascripthtmljquery

Strange behavior of shadows within Three.js

I've been working on creating a mini solar system but encountered an interesting issue. I want all the planets to cast and receive shadows from each other, but it seems like the shadow casting depends on the order of instancing. Here is the code for t ...

javascriptthree.jsshadow

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

htmlbootstrap-4

tips for automatically adjusting the height and width of an image within a div

I'm struggling with fitting an image that is 1587*666 into a div that has a height of 600px and width of 300px. Can someone provide me with an example to achieve this?https://i.sstatic.net/4SWi5.jpg Here's the code snippet: <div id="myDiv" s ...

htmlcss

Display the internal array of meteor in the template

Currently, I am working with Meteor and am facing a challenge in accessing values stored within a field that operates as an internal array. After executing the query (with projection), I receive a single record structured like this: { "comments" : [ { "u ...

javascriptarraysmongodbmeteormongodb-query

Can a data object in Vue be automatically updated when there are changes in the database?

I am developing a web application where users can create an account and join rooms. Once inside a room, they have the ability to click a button that randomly selects another user in the room to give a gift to. My challenge lies in updating a data object in ...

javascriptvue.jsvuetify.js

What is the best way to alter the color of the text cursor using html/css?

I'm a beginner when it comes to HTML and CSS, so my knowledge about them is quite limited. I recently encountered an issue where my text cursor disappears when the background-color of a <div> element is dark. Here's an example: <style&g ...

htmlcss

Tips for ensuring font-face displays correctly for every character

There seems to be a CSS clash that I cannot pinpoint on the site below: You can find the code snippet here: /*Font face settings for h3*/ @font-face { font-family: carrotflower; src: url('/wp-content/uploads/fonts/Carrotflower.eot') format(& ...

cssfont-face

Make sure to choose the radio button that corresponds to the desired title value, as this will be automatically added to the input text

Visit this link for a live example. <div class='liveExample'> <input type="radio" name="gender" value="Mr." checked>Mr. <input type="radio" name="gender" value="Mrs.">Mrs. <p>First name: <input data-bind=&ap ...

javascripthtmlknockout.js

Analyzing an Object through Functions

var Car = function(name, year) { this.name = name; this.year = year; this.print = function() { console.log(name+" "+year); } } var tesla = new Car("tesla", 2018); tesla.print(); tesla = JSON.parse(JSON.stringify(tesla)); console.l ...

javascriptjsonfunctionparsing