Align image within box using Bootstrap

My project screenshot is displayed below. The red line separates the current state from the desired outcome. I am struggling to make it fullscreen, meaning it should extend all the way to the corners. Despite trying various methods with Bootstrap 4, I have been unsuccessful. Here is the image:

https://i.sstatic.net/ilhP8.jpg

The code for this build is quite simple, as shown below.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<div class="row">
  <div class="col-md-12" id="page1">
      <div class="list-group">
          <a href="bericht.html" class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="col-md-2">
                  <img src="https://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder-800x423.gif" alt="" style="width: 100%">
              </div>
              <div class="col-md-6">
                  <h6 class="mb-1">Bootstrap element out of alignment</h6>
                  <p class="mb-1" style="font-size: 14px">Donec id elit non mi porta gravida at eget metus. Maecenas...</p>
                  <small class="float-right text-muted">25 minuten geleden door Henk</small>
              </div>
              <div class="col-md-2">
                  <h6 class="text-center">Reacties</h6>
                  <p class="text-center">57</p>
              </div>
              <div class="col-md-2">
                  <h6 class="text-center">Weergaven</h6>
                  <p class="text-center">2.543</p>
              </div>
          </a>
      </div>
   </div>
 </div>

I appreciate any assistance you can provide.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When utilizing Bootstrap's Grid, it comes with default margin and padding which can be eliminated by incorporating the .no-gutters class within your .row. Below is a demonstration of how you can accomplish this change, although I have chosen to exclude the hyperlink as integrating complex structures within a single hyperlink can lead to clutter.

.no-gutters {
  border: 1px solid #ccc;
  width: 100%;
}

.wrapper {
  padding: 15px;
}
    
[data-url] {
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container">
  <div class="row no-gutters" data-url="bericht.html">
    <div class="col-md-2">
      <img src="https://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder-800x423.gif" width="100%" alt="">
    </div>

    <div class="col-md-6">
      <div class="wrapper">
        <h6 class="mb-1">Bootstrap element out of alignment</h6>
        <p class="mb-1" style="font-size: 14px">Donec id elit non mi porta gravida at eget metus. Maecenas...</p>
        <small class="float-right text-muted">25 minuten geleden door Henk</small>
      </div>
    </div>

    <div class="col-6 col-md-2">
      <div class="wrapper">
        <h6 class="text-center">Reacties</h6>
        <p class="text-center">57</p>
      </div>
    </div>

    <div class="col-6 col-md-2">
      <div class="wrapper">
        <h6 class="text-center">Weergaven</h6>
        <p class="text-center">2.543</p>
      </div>
    </div>
    
  </div>
</div>

One final step for completion would be to incorporate some JavaScript to link a click event to data-url.

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

Create a visually appealing DataGrid cell by incorporating a vibrant colored oval with text or an icon inside

I'm in need of assistance with the mui/x-data-grid plugin. My goal is to display a cell within the grid containing both text and an icon, based on the value of the text. Unfortunately, I have been unable to achieve this so far. Here is the link to the ...

htmlreactjsmaterial-ui

The displayed database results will appear in the opposite order of what was originally assigned for both inline and block elements

I have a database with information that I am trying to display using a while loop. My goal is to show the results in this format... Firstname Lastname - Firstname Lastname - Firstname Lastname player1 ---------------player1-----------------------pla ...

phphtmlcsswhile-loop

Header not displaying properly on website

Link: test.getfamo.us Problem: The drop-down menu is not functioning properly when hovered over due to the main box covering it. I initially avoided using percentages for height in my website design, but after facing display issues on different monitors, ...

htmlcss

Is there a way to redirect the user to a different page without refreshing the page during navigation?

Utilizing javascript, ajax, and jquery to dynamically load content from PHP files without refreshing the page has been a successful venture. However, I am facing a challenge in creating a hyperlink within one of the loaded contents that redirects the user ...

javascriptphpjqueryhtmlajax

The color of the left arrow on the tooltip cannot be altered

Currently, I am using a tooltip that is positioned on the right side: <i class="fas fa-question-circle text-blue" data-toggle="tooltip" data-placement="right" title="hello" ></i> I have attempted to modify the color of the too ...

htmlcsstwitter-bootstrap

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

javascriptcsshtmlgoogle-chrome

Tips for preventing images from stretching the width and height of my HTML

I am facing an issue with my SVG files positioned as "absolute" on my page. When they are close to the corners of the page, they end up expanding the width of my Container element (using Material UI React). I have tried setting "maxWidth":"100vw" on the ...

cssreactjsimagewidth

What is the process for connecting two scripts together?

Purpose : I am currently working on a Firefox add-on with the goal of tracking the online status of my team members in a game. Current Progress : I have developed an initial JavaScript script that runs upon opening the browser. This script creates and ...

javascripthtmlfirefox-addon

Tips for adding content to a textarea with JavaScript without disrupting the editing history

I have a specific requirement where I want the user to be able to highlight text in a textarea, then press ctrl + b to automatically surround that selected text with stars. Here is what I envision happening: 1) The initial content of the textarea is: "he ...

javascripthtmltextareaundo-redo

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Executing JavaScript code does not execute CSS code

Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript. & ...

javascripthtmlcss

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Losing values due to custom $validator and getterSetter in AngularJS / UI Bootstrap

My objective is to create a UI Bootstrap datepicker with an input mask feature. The datepicker directive only validates dates selected using the popup window and not dates manually typed in by the user. To address this, I researched how to implement custo ...

javascriptangularjstwitter-bootstrapvalidationangular-ui-bootstrap

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

javascripthtmlcssautomated-testsnightwatch.js

Choose all the items that share a specific hue?

How can I target all elements with a specific color? I need to update all text that has a color of #1a0dab to #00b0f4. ...

cssuserstyles

Navbar links in Bootstrap unexpectedly expanding in width

My website has a navigation menu that looks like this: https://i.stack.imgur.com/1R8mv.png However, when I click on a menu item, the link container inherits the width of the dropdown menu. Is there a way to prevent this using purely CSS? I am currently ...

htmlcsstwitter-bootstrapdrop-down-menudropdown

Conceal a different div unless it includes

Hi everyone, I need help with a filter code snippet: $(".title").not(":contains('" + $("[name=filter]").val() + "')").hide() The issue I'm facing is that the .title class is nested within the .sortAll class along with many other divs. I w ...

javascriptjqueryhtml

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

What could be causing my Bootstrap 5 hover effect to malfunction?

Can anyone help with changing the hover effect of a bootstrap button in my code? Here's the HTML: <button type="button" class=" btn btn-dark">Sign Up</button> And here's the CSS I tried: .btn-dark:hover { color: ...

cssbuttoncss-selectorshoverbootstrap-5

Trouble with updating scope values in the view within IONIC 1 and AngularJS

I recently implemented a feature to save the two most recent login details. The functionality works correctly, but I'm facing an issue where my view only updates upon refresh even though the scope values are being updated. I've tried using $scop ...

htmlangularjsionic-frameworkscope