A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for:

https://i.sstatic.net/4LgVB.png

Below is the code I currently have:

 <div class="row ">
        <div class="col-lg-6 row-eq-height push-right">
            <img src="1.jpg" class="img-responsive">
        </div>

        <div class="col-lg-6 row-eq-height">
            <div class="eq-row-text ">
                 <p class="row-text">Text description for image </p>
            </div>
        </div>
    </div>

    <div class="row ">
         <div class="col-lg-6 row-eq-height ">
            <div class="eq-row-text ">
                 <p class="row-text"> Text description for the image </p>
            </div>
        </div>

        <div class="col-lg-6 row-eq-height">
            <img src="1.jpg" class="img-responsive>
        </div>
    </div>

I attempted to use the CSS class "no-padding" and played with margins. With zero padding, the left side of the first image aligns with the browser edge (intended), however there is still empty space on the other edge (right side of image).

How can I eliminate this empty space and achieve a layout similar to the reference?

htmlcsstwitter-bootstrap

Answer №1

.col-md-6{
    margin-right: 0px;
    margin-left: 0px;
}

Answer №2

It appears that there may be an issue with the <p> padding/margin, as well as with the <img> padding/margin. However, it seems like the problem lies in the sizing of the elements within the row.

I believe I have resolved the issue in my CODEPEN

To address this, I included a height: *** in the row class, which could be necessary for achieving the desired outcome since you are utilizing the row-eq-height bootstrap class.

HTML

<div class="row ">
    <div class="col-lg-6  row-eq-height push-right">
        <img src="1.jpg" class="img-responsive">
    </div>
    <div class="col-lg-6 row-eq-height">
        <div class="eq-row-text ">
            <p class="row-text">Text description for image </p>
        </div>
    </div>
</div>

<div class="row">
     <div class="col-lg-6 row-eq-height ">
          <div class="eq-row-text ">
               <p class="row-text"> Text description for the image </p>
          </div>
      </div>
     <div class="col-lg-6 row-eq-height">
          <img src="1.jpg" class="img-responsive">
     </div>
</div>

CSS

p{
    margin: 0;
    padding: 0;
}
img{
    margin: 0;
    padding: 0;
}
.row {
    margin: 0;
    padding: 0;
    height:60px;
    background-color: #eee
}

Answer №3

In the case of utilizing the LESS/SASS source: update @grid-gutter-width in the variables document to be set as 0

Answer №4

To eliminate the empty space, consider enlarging your image to cover the columns. Adjust the image width manually with CSS like so:

img {
     width: 100%; 
}

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

Instructions for passing a single value from a while loop and showing a different value in a text box through PHP

Can one value be displayed while sending another value in an Input text field simultaneously? I have a form that displays details in descending order, but when I update the details from another page, they are being updated in ascending order instead. Cod ...

phphtml

Generating safe HTML output in PHP requires adding 4 spaces before the code

I'm currently designing a form that generates basic HTML and other plain text output for users to copy and paste into a content management system. For setting up the variables, I follow this structure: $date1 = $_POST['date1']; $city1 = $_ ...

phphtml

What is the best method for locating the innermost element of an HTML tree that has a specific class assigned

I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...

javascriptjqueryhtml

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

javascriptjqueryhtmlcssevents

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...

javascriptjqueryhtmlcss

What are some ways to broaden the width of my footer div?

Can someone help me figure out why my footer div is not taking up all the available horizontal space? Below is my code, but it's not working as expected. Any assistance would be greatly appreciated! Markup: <div class="footer"> Copyright ...

htmlcss

When a PHP if statement is triggered by reading a text file, it activates a checked

I am working on a PHP project that involves an on-off button and a txt file. The goal is to have the button disabled (with 'unchecked' echoed) when the value in the txt file is true, and enabled (with 'checked' echoed) when the value is ...

phphtmlbutton

Is there a way for me to manually initiate a digest cycle on the parent scope based on my instructions?

I am struggling with getting a directive to render automatically when a change is made to the underlying model programmatically. Using $scope.$apply seems like the right approach, but unfortunately it's not working as expected. The directive only rend ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

javascripthtmlcss

The sorting icon in jQuery Data Table's search option is not functioning

I am having an issue with jQuery DataTables. When using jQuery DataTables, it provides a default search option. However, the problem arises when I search for a particular record and if the content does not match or if I find a single record, then I need to ...

javascriptjquerycss

Instructions on how to automatically play multiple video tags on one HTML page while also opening a modal

I'm working on an HTML page that needs to display two different videos in separate modals. My goal is to have each video start playing automatically when the play-video icon is clicked and the modal opens. I attempted this using the code snippet (vid ...

javascripthtmlcss

Customizing the appearance of two separate tables

I have a pair of tables that I want to style differently. Table 1 needs the images centered with no border, while table 2 should have text left-aligned with a border. Here is the CSS: table, th, td { border: 1px solid #999; border-collapse: colla ...

htmlcss

Can this actually work? Overflow-y set to visible and overflow-x set to scroll/auto

We are facing a challenge within our team that we are struggling to resolve. Our Grid control has been customized by us. When the icon next to the column name is clicked, a pop-up div (referred to as divFilter) appears, allowing for filtering options to be ...

htmlcsspositionoverflowpositioning

How to Implement a Nested Static Page in Play Framework

I am currently utilizing play framework for Java and focusing on a job portal project that consists of both the main site and an admin panel. Each of these sections has its own unique header and footer, so sharing them in the main file is not an option as ...

javahtmlplayframework-2.0

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

Dealing with Unintended CSS Hover Effects That Just Won't Quit

I have a div that is styled as a circular shape with an image and text centered inside of it. The circle and image are visible while the text is transparent until hovered over. When hovering, the circle border flashes, the image's opacity decreases, a ...

csshover

Designing Interactive Interfaces using React Components for Dynamic Forms

Is there a way to implement dynamic forms using React Components? For instance, I have a form displayed in the image below: How do I structure this as a React component? How can I incorporate interactivity into this component? For example, when the "+ A ...

htmlcsstwitter-bootstrapreactjs

Leveraging arrays generated from two separate MySQL queries for dual selection functionality with JavaScript

I have successfully populated the first HTML select with results from the first query. Now, I would like to store the results from the second query in either a Json file or XML and then use plain javascript (not jQuery) to populate the second HTML select ...

javascriptphphtmlmysqljson

Replacing the previous observation

My events app features an all-events component that showcases all the events created. Upon loading the all-events component, the events are fetched from the database. Below is a snippet of the relevant code from the Typescript file of the all-events compo ...

htmlangularrxjs