Having trouble with the alignment of the Bootstrap CSS grid

Recently started using Bootstrap version 5-2-0

I'm trying to create a layout where an image of a cat takes up one side, with content and a form on the other side (content above the form), but I'm having trouble getting it to display correctly.

<div class="grid">
  <div class="g-col-6 g-start-1">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="g-col-6 g-start-6">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div class="g-col-6 g-start-6">form</div>
</div>

Codepen Link: https://codepen.io/emmabbb/pen/ExRmgZE

csstwitter-bootstrap

Answer №1

This will get the job done.

Snippet:

<div class="row">
  <div class="col-6">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="col-6">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
    <div>form</div>
  </div>
</div>

Answer №2

Your code is lacking the inclusion of the stylesheet at https://getbootstrap.com/docs/5.2/assets/css/docs.css.

Furthermore, remember to begin with g-start-7 instead of g-start-6, as 1-6 corresponds to the first column and 7-12 pertains to the second columns.

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

    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">

<div class="grid">
  <div class="g-col-6">
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div class="g-col-6 g-start-7">
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div class="g-col-6 g-start-7">form</div>
</div>

For more information, visit: https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works

Answer №3

Don't forget to use !important when adding g-start classes in Bootstrap 5.2

.g-start-2 { grid-column-start: 2 !important; }

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

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

After trying to install NextJS using both methods npm install next react react-dom and npx create-next-app appname, I noticed that my project directories are different from what they are supposed to look like: Instead of having pages, api(_app.js, index.j ...

javascripthtmlcssnode.jsnext.js

How to center align two child divs within a parent div using flexbox in Bootstrap 5

I'm attempting to center two child divs within a parent div, but they're displaying side by side in the center. html <div class="container mt-5 box d-flex justify-content-center align-items-center"> <i class="fa-solid f ...

htmlcssbootstrap-5

The scroll bar goes beyond the page boundaries

I am encountering a scrollbar issue with a bootstrap list group on my single-page website. Despite setting the page to occupy 100% of the view using flexbox, the scrollbar is extending beyond the view, and the html/body scrollbar is being utilized instead. ...

htmlcssbootstrap-5

Tips for creating a CSS selector for a button

<div class="test" data-credit-card-index="1"> <button class="test1 test">Delete</button> <button class="test1 test">Edit</button> I'm trying to create a CSS locator specifically for the Edit button within the [d ...

cssselenium

Artistically connect the main navigation bar to the secondary one

I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this: When a user c ...

jqueryhtmlcss

Using React to Implement Bootstrap 5 Popovers

I'm currently attempting to incorporate Bootstrap 5 popovers into my React project without utilizing the React-Bootstrap library. Following the guidelines provided in the Bootstrap documentation, I've implemented the initialization code as instru ...

reactjstwitter-bootstrap

CSS issue: Font size

Can someone help me out with a CSS issue that has been tripping me up? I've been working with CSS for three years now, and this particular problem is stumping me. I have defined some styles in my CSS file that should be applied to the content of my w ...

htmlcsswordpress

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

I was attempting to emphasize the clicked navbar by adding an active class. This is the code I tested: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> < ...

htmlcssbootstrap-4

Adding up rows and columns using HTML

I've designed an HTML table to function as a spreadsheet, with the goal of being able to total up rows and display the sum in a cell labeled "Total." The same calculation should be applied to columns as well, with totals displayed in the last column c ...

javascriptjqueryhtmlcss

Is the Bootstrap 4 Flexbox Row displaying in columns instead of rows?

I'm puzzled by the code below. Despite following examples that suggest it should display in horizontal rows, it's actually rendering into columns. Any ideas why? <div class="d-flex"> <div class="flex-row"> <div class=" ...

twitter-bootstrapflexboxbootstrap-4

Having trouble getting my image to appear at the top of the website, could it be an alignment issue?

Here is a screenshot showing the issue: https://i.stack.imgur.com/kSVQj.png. The quote on my website does not align to the top as expected. Can anyone provide a solution for this? Below is the corresponding code: <body> <div id="container"> ...

htmlcss

Handling Pop-up Windows in Python with Selenium

# Automation Setup from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.common.exceptions import NoSuchAttributeException, NoAlertPresentException from selenium.webdriver.support.ui import WebDriverWait from seleniu ...

htmlcssseleniumselenium-webdriver

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

javascripthtmlcssangularjs

Achieving responsive design using text font percentage instead of text images can be done by implementing the following code snippet provided below

When working with text in HTML, I encountered an issue where using percentages for width and height was not giving me the desired results. To work around this, I used images of text instead, but each image ended up either stretched or looking too small. H ...

htmlcss.netimagealignment

Show or hide text when list item is clicked

This is the rundown of services <div> <a href="#hig"><button class="tag-btn">High blood pressure Diabetes</button></a> <a href="#hih"><button class="tag-btn">High ch ...

javascripthtmljquerycss

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

javascriptphphtmlcssnode.js

Why does the modal window gracefully descend when the mobile keyboard is activated?

I designed a modal window that has a fixed position: <div className={classes['UIModal'] + ' ' + classes[transition]} onClick={() => dispatch(modalHandler('offer'))} > <div className={classes['UIModal__ ...

cssreactjs

Adjust the height of column divs to equal the height of their parent container

Looking for a solution: I have multiple divs in a column layout and I want them to expand to match the original height of the parent. The parent's height is not fixed as it is part of a flex-based page design. Can this be done? In the example provid ...

cssflexbox

Customizing listview appearance in asp.net with css and enhancing with javascript

When I print, the css class is not being used although it appears when using the program <script type="text/javascript"> function printDiv() { var divToPrint = document.getElementById('DivIdToPrint'); ...

javascriptasp.netcssprinting

Issue with Wordpress css rendering on Internet Explorer

My webpage is functioning well in Chrome and Firefox, but I'm facing compatibility issues with Internet Explorer. I've identified several bugs related to tables and layout, however, I'm struggling to resolve the font and text-transform prob ...

csswordpressinternet-explorer