Take out the margin from the bootsrap grid column within the listed card

I'm trying to create a card similar to this design https://i.sstatic.net/WCzDp.png

but I keep getting unwanted margins like in this image https://i.sstatic.net/XthmZ.png

Can someone guide me on how to achieve the desired layout? Check out the code on Codepen Link, or see below:

body{
    font-family: 'Catamaran', sans-serif;
    letter-spacing: 1px;
}
.hotel-li {
    margin: 0;
}
.hotel-header{
    margin-bottom: 0;
}
.hotel-desc {
    margin-bottom: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>
  <body>
    <div class="w-75 mx-auto card bg-dark text-white"><div class="card-header text-center border-white">Hotels</div><ul class="list-group list-group-flush"><li class="hotel-li list-group-item bg-dark border-white row"><div class="col-md-4"><h3 class="hotel-header">hotell</h3><p class="hotel-desc">dfsfdsfdsfdsfdsfdsfds</p></div><div class="col-md-4"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div></li><li class="hotel-li list-group-item bg-dark border-white row"><div class="col-md-4"><h3 class="hotel-header">hotel 2</h3><p class="hotel-desc">random text</p></div><div class="col-md-4"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div></li></ul></div>
  </body>
</html>
Appreciate any assistance with this issue.

htmlcssbootstrap-4

Answer №1

To achieve the desired layout, simply apply 

d-flex justify-content-between align-items-center
to the li element and remove any additional classes from its children :)

VIEW CODEPEN EXAMPLE: https://codepen.io/emmeiWhite/pen/jOMjbZb

 <li class="hotel-li list-group-item bg-dark border-white row d-flex justify-content-between align-items-center">

  <div>
    <h3 class="hotel-header">hotell</h3>
    <p class="hotel-desc">dfsfdsfdsfdsfdsfdsfds</p>
  </div>

  <div>
    <button class="btn btn-outline-light mx-2">Edit</button>
    <button class="btn btn-outline-danger">Delete</button>
  </div>
</li>

Answer №2

If you want to utilize the built-in Bootstrap flex classes, refer to https://getbootstrap.com/docs/4.0/utilities/flex/. I have noted the additional code provided.

Consider using col-6 instead of col-4 depending on your layout design.

body {
  font-family: 'Catamaran', sans-serif;
  letter-spacing: 1px;
}

.hotel-li {
  margin: 0;
}

.hotel-header {
  margin-bottom: 0;
}

.hotel-desc {
  margin-bottom: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-75 mx-auto card bg-dark text-white">
  <div class="card-header text-center border-white">Hotels</div>
  <ul class="list-group list-group-flush">
    <li class="hotel-li d-flex align-items-center list-group-item bg-dark border-white"> <!-- d-flex to convert it into flexbox container, align-items-center to align the items vertically -->
      <div class="col-6">
        <h3 class="hotel-header">hotell</h3>
        <p class="hotel-desc">dfsfdsfdsfdsfdsfdsfds</p>
      </div>
      <div class="col-6 d-flex justify-content-end"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div> <!-- justify-content-end to move the content to the end horizontally -->
    </li>
    <li class="hotel-li d-flex align-items-center list-group-item bg-dark border-white">
      <div class="col-6">
        <h3 class="hotel-header">hotel 2</h3>
        <p class="hotel-desc">random text</p>
      </div>
      <div class="col-6 d-flex justify-content-end"><button class="btn btn-outline-light mx-2">Edit</button><button class="btn btn-outline-danger">Delete</button></div>
    </li>
  </ul>
</div>

Answer №3

Give this a shot:
    <div class="container-fluid">
    <div class="row">
    <div class="col-6"></div>
    <div class="col-6 d-flex justify-content-end"></div>
    <button></button>
</div>
</div>

Utilizing Bootstrap can help you achieve the desired result

Check out: https://getbootstrap.com/docs/5.0/utilities/flex/#enable-flex-behaviors

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

React-router is failing to redirect properly within a specific component

I have configured react router to redirect from the "/" route to a custom route "/:city/posts", but the redirect is not working as expected. When the button is clicked, the page refreshes. This setup is working fine in other components, so I'm not sur ...

javascripthtmlexpressreact-router

FancyBox: Can You Achieve the Same Scrolling Effect with HTML Fragments Instead of Images?

Is it possible to display HTML fragments instead of images with the same scrolling effect (when using the next() method)? I am struggling to figure out how to make this work. Currently, I am able to display a single HTML fragment using fancybox: $.fancyb ...

javascripthtmlfancyboxfancybox-2

What is the process for layering two images and positioning them at the bottom of a mobile screen?

I am encountering an issue with white space at the bottom of my mobile-responsive page. Specifically, I have two overlapping images within a div that I want to position at the bottom of the page, but I am unsure of the correct approach to eliminate this wh ...

htmlcss

Is there a way to dynamically update an image source using JavaScript based on the device size?

I am attempting to switch the image source using JavaScript. Specifically, when the window size is max-width: 576px;, I want it to change to a different image source that fits the aspect ratio of mobile devices. This element is part of an image slider. I ...

javascripthtmljquerycssmedia-queries

Images that can be clicked on within a parallax design

My goal is to create a unique menu by using clickable images instead of regular links. These images are going to be parallax layers, so I'm wondering how best to approach this. Should the clickable images be on separate layers? The specific image I h ...

javascriptcssmenuparallaxlayer

Cloned bootstrap nav tabs are controlled just like the original version

I have a unique scenario where I need to generate a series of "cards" with tabs on top (each card having tabs). To accomplish this, my plan was to use a template element that I can clone and then populate. Everything seems to work fine, except for the tabs ...

javascripthtmltwitter-bootstrap

Collection packed with JSON data

Having some trouble while trying to populate a list with strings from a JSON file. Everything works fine when extracting the 'name' string, but as soon as I attempt to include another string like 'age', an undefined error occurs. (ex ...

htmljsonajax

Is it possible to have a variable number of dynamic CSS Grid columns with the option of including a header or footer

Implementing a dynamic number of columns with CSS Grid is a breeze. .grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } // These .cells are beautifully aligned <div class="grid"> <div class="cell"></div> ...

htmlcsscss-grid

The endpoint for 'create_chat' with given parameters '()' was not located. Only one pattern was attempted: 'create_chat/(?P<id>[0-9]+)/$'

Hello everyone, I am currently working on developing a chat application using Django Version 3.8.1. I have encountered an error that is causing some issues for me. The specific task at hand is to create a view for private chat with a friend. views.py def ...

pythonhtmldjangodjango-views

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Tips for removing a section of HTML code within a PHP script

I attempted to remove a "Search" button located in the top left corner of a website. While searching for a solution, I stumbled upon a helpful tip at this link: Best way to find out which php file has generated an html line of code in WordPress Even afte ...

phphtmlwordpressstorefrontchild-theming

Encourage UL to expand along with its contents, specifically the inline block list items

Struggling to get list items in a css menu to float left without setting the width of the parent UL. You can check out my progress on this JS fiddle: http://jsfiddle.net/FkK7Y/1/ In the "products menu," I have two sets of links that are currently stackin ...

cssmenupanel

What's the best way to make div columns appear closer together when floating?

Check out My CodePen: http://example.com/codepen Hello there, today I am working on a 6-column layout with 3 columns in each row. The 3rd column is quite long and resembles a sidebar. According to the design, columns 4 and 5 should be positioned close to ...

csshtmlcss-float

Adjust Scale to Less than 1 in JVectorMap

I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoom ...

javascriptjqueryhtmlcssjvectormap

What is the most efficient method for incorporating fonts.googleapis.com into CSS files for use on both HTTP and HTTPS pages?

My website functions correctly when accessed through URLs that start with either http:// or default to the http protocol if not specified. However, an error occurs stating that the main.css file cannot be found when the URL begins with https://. The lates ...

csshttphttps

The functionality of the Bootstrap dropdown or radio input type is not functioning correctly

I'm currently utilizing electron([email protected]) along with bootstrap([email protected]). Whenever I attempt to incorporate a dropdown or other components from Bootstrap, they simply do not function. I am unsure of what mistake I might ha ...

javascripthtmlelectronbootstrap-5

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

Generate a unique class for each img element randomly

Is there a way to assign each image a unique random class instead of giving all the images the same random class? Any help would be appreciated. $(document.body).ready(function () { bgImageTotal = 5; randomNumber = Math.round(Math.random() * (b ...

javascriptjqueryhtmlcss

What can I use instead of "display:none" in Javascript or Jquery?

A problem I encountered with my website involves a menu that toggles content visibility based on menu item clicks. The JQuery script responsible for this behavior is shown below: $(document).ready(function() { $("#bioLink").click(function(){ $ ...

javascriptjquerycss

When trying to access a CSS file, the server responded with a HTTP status 404 error, indicating that the requested resource is currently

Encountering the "http status 404 - the requested resource is not available" error specifically for my template.css file. After some investigation, it seems to be a referencing issue. This error is preventing any styling from being applied to my welcome.x ...

htmlcssjsf-2