There is zero gutter in Bootstrap

Is it possible to use the bootstrap grid system without any gutters? I want to have 3 columns in one row like this: http://prntscr.com/6gpmhm. I have shared the markup for the CSS I am using, which is the default CSS of the framework.

<section class="team-block">
<div class="row">
<div class="col-sm-4">
<img src="images/photo-01.jpg" height="534" width="534" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-02.jpg" height="267" width="266" alt="image description">
<img src="images/photo-10.jpg" height="267" width="266" alt="image description">
<img src="images/photo-03.jpg" height="267" width="266" alt="image description">
<img src="images/photo-04.jpg" height="267" width="266" alt="image description">
</div>
<div class="col-sm-4">
<img src="images/photo-05.jpg" height="534" width="534" alt="image description">
</div>
</div>
</section>

htmlcsstwitter-bootstrap

Answer №1

To have the images display in a single column, it is necessary to eliminate pixel widths and redefine rows as shown below:

<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-02.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-10.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <img src="images/photo-03.jpg" class="img-responsive" alt="image description">
        </div>
        <div class="col-sm-6">
            <img src="images/photo-04.jpg" class="img-responsive" alt="image description">
        </div>
    </div>
</div>

To remove the spacing between the images, you can include the following CSS styling:

.col-sm-4    {
    padding: 0px;
}
.col-sm-6    {
    padding: 0px;
}

Answer №2

To achieve this, an external class must be utilized.

.no-gutter > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

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

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

Updating pages dynamically using AJAX

There's a glitch I can't seem to shake off. I've successfully implemented AJAX for page loading, but an issue persists. When I navigate to another page after the initial load, the new page contains duplicate tags like <head> and <f ...

javascriptphpjqueryhtmlajax

Is Material UI equipped to handle CSS Container Queries?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Recently introduced container queries for CSS are an exciting development. I'm curious if MUI 5.0 already supports them out of the box. It seems that the current SxProps do not in ...

cssreactjsmaterial-uicontainer-queries

Creating personalized tags or components by utilizing insertAdjacentHTML in Vue

With the use of insertAdjacentHTML, I am able to create HTML elements such as div and span, but it seems that I cannot generate custom tags like <myComponent> </myComponent>. I understand that insertAdjacentHTML can create HTML elements, but a ...

javascripthtmlvue.js

Generating a unique JavaScript array by extracting data from an HTML input element

I am working on a basic HTML form that requests a number between 1 and 10 from the user. Depending on this number, I aim to generate a new array. Currently, the code displays an alert box with the newly created array, but my end goal is to have a table p ...

javascripthtmlarraysfunction

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

javascripthtmlcss

What is the best way to extract additional values linked to the query within the array?

I have successfully retrieved all subcategories of a category using the code below. However, I am now facing an issue where I also want to fetch other fields associated with each subcategory, such as the price if the subcategory is a Product like Smartphon ...

phphtmlmysqlarraysfor-loop

What is the best way to create a unique transition for every component?

I have three elements that I would like to display with a transition effect when they appear or disappear. There is one main element and the other two show up when you click the corresponding button. You can view my current code sample here: https://jsfid ...

cssvue.jsvuejs2css-transitionsvuejs-transition

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

htmlcsstwitter-bootstrapvideoflickr

Changing the hover color of an Angular Material MD Button

<div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == ' ...

javascriptcssangularjsangular-materialsaas

Tips for nesting React components within a grid layout

For my News website, I have a component that showcases articles fetched from an API in a grid format. Additionally, I also have a separate component dedicated to displaying the Latest News. I am looking for a way to position the Latest News widget within t ...

cssreactjsgridwidgetposition

Fraudulent emails targeting my posted ads - beware!

Operating a classifieds website where anyone can view and contact posters without needing to be a member poses certain challenges. One of the main issues I face is the abundance of scam emails being sent to users, attempting to deceive them and steal their ...

phpmysqlhtmlsecurityemail

Similar to the $btn-secondary-color in Bootstrap 4 Beta

In my work with Bootstrap 4 Beta, I encountered an issue while using the $btn-secondary-color variable in the _custom.scss file. It appears that this specific variable is no longer a part of Bootstrap 4 Beta. Instead, it has been replaced by the following ...

twitter-bootstrapsasstwitter-bootstrap-4

Adjust the width of the mosaic layout to a 50% / 50% ratio

I'm looking to adjust the layout so that each image occupies 50% of the page. Currently, one large image takes up 2/3 of the space and two smaller images take up the remaining 1/3. You can find the images here: To make the large image occupy 50%, yo ...

css

Identify the moment when the SPAN element reappears in sight

I have a question that may have been asked before, but I haven't found a satisfactory answer yet. Within my HTML code, I have a SPAN element with an onclick event, like so: <span onclick='loadDiv()'>Text</span> When a user cli ...

javascripteventsvisibilityhtml

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

htmlcss

Tips for avoiding accidentally selecting nearby text while holding down a button on your mobile device

My application requires the user to press and hold a button to record audio. However, on mobile devices, when the user holds the button, the browser attempts to select nearby text due to finger pressure. While this behavior is understandable, I want to pre ...

javascripthtmlcssreactjsmaterial-ui

Disable form input fields while keeping all other elements enabled

Currently, I am facing a dilemma where I must deactivate specific input fields within a form. Given that there are numerous fields to consider, individually disabling each one seems impractical. Can anyone offer advice on how to disable a set of elements ...

javascripthtmlcssreactjs

labels placed beneath evenly spaced radio buttons arranged horizontally

When creating a user form, I am in need of multiple likert items to gauge opinions accurately. My project requires the use of the oTree library, which is closely integrated with django. It is essential that any solution implemented aligns with oTree as muc ...

cssdjangootree

Here's how you can pull information from a MySQL database and showcase it on an HTML

I successfully created a database in MySQL where users can enter their details on /upload.html, which then get stored in the test2 database and person_list table. However, I am facing an issue with displaying this data on /download.html. My goal is to hav ...

phpmysqlhtml