Removing the margin left and right from the col class in Bootstrap

Just starting out with bootstrap and I'm having some trouble with aligning my images. I have 3 images side by side, but there seems to be a margin between them. Here is the image

I want the images to be adjacent with no margins. The center image is 1200x400 in size, while the left and right images are both 600x400. I've applied the img-responsive class. What could be causing this issue? Here's the code snippet:

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
        </div>
        <div class="col-sm-6">
            <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
        </div>
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
        </div>
    </div>
</div>

Furthermore, it appears that the pictures aren't vertically aligned properly in the illustration. Any suggestions on how to correct this alignment issue would be greatly appreciated.

Thank you!

csstwitter-bootstrap-3

Answer №1

If you are working with Bootstrap version 4, you have the option to utilize:

<div class="row no-gutters"></div>

By using this code snippet, the margins on both left and right will be set to 0.

This specific styling can be achieved through the following Bootstrap class:

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

Answer №2

<row class='no-gutters'>...</row>

Although your question is tagged with version 3, it's worth noting that Bootstrap 4 introduces a new class called no-gutters for grids. This class eliminates padding from the columns and also removes any negative margin on the row.

To learn more about this feature, you can visit:

For instance, compare a container with a standard row to one with a row containing the no-gutters class.

When working within a framework like Bootstrap or Foundation, always refer to the documentation for built-in solutions. Avoid adding unnecessary !important rules in your CSS.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>

Answer №3

If you follow the advice of Yorki Bonilla, you can implement the following code structure:

<div class="container">
<div class="row no-marginLR">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

Also, don't forget to define a new class in your stylesheet:

.no-padding {
    padding: 0px;
}

Furthermore, make sure to eliminate the left and right margins from the row containing your columns by applying this CSS rule:

.no-marginLR {
    margin-left:0;
    margin-right:0;
}

It's worth noting that I've assigned the .no-marginLR class to the particular row element.

Answer №4

this is a snippet of CSS code

body {
    background-color: #D8BFD8;
}

.navbar-default {
  background-color: #4c1f36;
  border-color: #63304a;
}
.navbar-default .navbar-brand {
  color: #eeeeee;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #dddddd;
}
.navbar-default .navbar-text {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #4c1f36;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #63304a;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-toggle {
  border-color: #63304a;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #63304a;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #eeeeee;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #eeeeee;
}
.navbar-default .navbar-link {
  color: #eeeeee;
}
.navbar-default .navbar-link:hover {
  color: #dddddd;
}

@media (max-width: 768px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #eeeeee;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
}

@media (min-width: 768px) {

    .horizontal-menu {
        width: 700px;
        float: left;
        opacity: 0.95;    
    }

    .left {
        float: left;
        padding: 10px;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

.row-with-full-width {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Answer №5

Apologies for the confusion earlier, here is the solution:

If you prefer the images to display like this:

Correct arrangement of images

instead of like this:

Previous layout using your code as an example

You'll need to remove the padding from the Col-sm class in Bootstrap.

How can you achieve that?

It's not recommended to eliminate padding from the entire col-sm class. A better approach would be to create a custom class specifically for this scenario named (I'm not sure) "no-padding" and do the following:

<div class="container">
<div class="row">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

Then, update your CSS with the following:

.no-padding {
padding: 0px;
}

This should resolve the issue of spaces between the images.

Answer №6

To eliminate all margins in your CSS class, include margin: 0 !important. For removing only the left and right margins while retaining the top and bottom ones, ensure to indicate 

margin-left: 0 !important; margin-right: !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

I'm experiencing difficulties with arranging images side by side on my bootstrap website

I am facing an issue while using Bootstrap 5 where the images are not aligning horizontally as expected. Instead, they are getting added in the lower row. I have tried various solutions but nothing seems to work. Any help on this matter would be greatly ap ...

htmlcssimagebootstrap-5

Issue with Div Element Not Expanding When Populated

I am facing an issue with a stack of nested divs, each having a specific ID for CSS styling. However, the outermost DIV tag is only expanding to a predetermined height value instead of automatically adjusting to fit its contents. This is a problem because ...

csshtml

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...

javascriptjqueryhtmlcss

Ways to incorporate text into a div container

For my assignment, I am working on setting up a menu website and I want to create a floating side div for the order summary. If you need a visual reference, you can check out this Figma design: Just to clarify, this is my first time dealing with coding s ...

javascripthtmlcssbootstrap-4

Safari does not support the use of nth-child

My CSS code is functioning properly in Firefox and Chrome but not in Safari (5.1). Even though I have confirmed that Safari supports nth-child, it still does not work. Can someone please help me identify what I'm doing wrong? CSS: option:nth-child ...

htmlcss

Arrange matching divs from two columns on the same row

My webpage features 2 columns: The first column displays questions along with their previous answers, while the second column also shows the same questions but with input fields for new answers. This setup is designed for comparison purposes. However, due ...

jqueryhtmlcss

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Tips for customizing the appearance of the Google map on my website

I'm currently working on implementing Google Maps into my website and I have encountered an issue regarding the color scheme. Here's a snapshot of how it currently looks: https://i.sstatic.net/CxRKX.png However, I came across a website with a Go ...

htmlcssgoogle-maps

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

javascriptcssreactjsscroll

"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code: <div class="mission-button"><span class="mission">view our mission</span></div> Accompanied by this CSS: .mission-button::before { content:'&ap ...

htmlcss

Change Dropdown menu orientation to vertical

Struggling to convert a CSS drop down menu into a vertical menu. I've tried multiple solutions but can't seem to achieve the desired result. Here is my CSS and HTML code, can anyone point out what I might be missing? #sddmT { margin: 0; pa ...

cssmenu

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

htmlcssbackground

The CSS3 properties controlling my following element will remain fixed after reaching a specific threshold

After successfully creating my personal portfolio website, I've hit a roadblock when it comes to styling beyond the portfolio grid. Despite my best efforts, progress has been slow and frustrating. Realizing that someone with more expertise could quic ...

htmlcsspositionelementportfolio

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to include a universal CSS file in Angular 2 applications? Currently, I have multiple components that share the same button styling, but each component has its own CSS file containing the styles. This setup makes it difficult to make changes ...

cssangularangular-cli

AngularJS allows users to easily select and copy all text from both div and span elements within a specified range. This feature makes it

I am working on implementing a select all feature using AngularJS for text displayed in a structure similar to the one below. Once all the text is selected, users should be able to press ctrl + c to copy it. <div ="container"> <div class="header ...

javascripthtmlcssangularjsjqlite

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

Controlling the Size of Images

I am currently dealing with a significant issue related to saving bandwidth and storage. My website (built on PHP/Laravel) features 5-6 different image sizes in the desktop view. Whenever a user uploads an image, I am required to save 7 versions of that i ...

phphtmljquerycsslaravel

Employing JavaScript for fading divs in and out sequentially

Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated! I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It&apo ...

javascriptjqueryhtmlcssonclick

Creating a dual-column checkbox design with CSS only

I'm working with a dynamically generated form element that can only be styled using CSS. I need help achieving a specific layout without making any HTML changes, except for the classes. The "element" and "formField" classes are common and cannot be mo ...

javascriptjqueryhtmlcss

Guiding the jQuery Document

I currently have a stylesheet in the head section with the following content: *, body { direction:rtl; } Upon inspection, I found that the dir variable of jQuery is set to ltr: $(function(){ alert(this.dir); }); How can I obtain the specific page di ...

jquerycss