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

What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here. Below, you'll find the HTML and CSS code I've implemented for this effect. ============================== ...

htmlcss

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

I am currently developing a basic tax calculator that requires retrieving the value of an element from a drop-down menu (specifically, the chosen state) and then adding the income tax rate for that state to a variable for future calculations. Below is the ...

javascriptjqueryhtmlforms

Unexpected problem with redrawing HTML application in Android WebView

I created a basic nixie clock app using HTML and wrapped it in a WebView for use on Android. It consists of one HTML file, a JS file, a CSS file, and ten digit images. After a few hours, I noticed stripes appearing in the center of the screen where the an ...

androidhtmlcsswebviewdrawable

Python web scraper unable to locate specified Xpath

My question was previously posted here: Xpath pulling number in table but nothing after next span In testing, I successfully located the desired number using an XPath checker plugin in Firefox. The extracted results are displayed below. Although the XPa ...

pythonhtmlseleniumxpathselenium-webdriver

The <a href="#divtagid"> link is incapable of triggering the opening of the div tag when called from JavaScript

I need help with displaying the content of a div with the id "hello" in maindiv when clicking on the href "Click Here", but it's not working as expected. Here is the code I have: $(document).ready(function() { var newhtml = '<a href="#he ...

javascriptjqueryhtml

Passing Parameters to Razor Pages Controller

Within my controller, there exists a function as follows: public ActionResult AddSubSub(int? idOfSubsub) { return RedirectToAction("Index", new { searchword = "" }); } I am able to invoke this function without providing any parameter. I attempted the ...

javascripthtmlasp.net-corerazor

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

javascriptjqueryhtmlcss

Let's discuss how to include the scrollTop option

I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file. /*** ...

javascriptjqueryhtmlcss

The CSS overflow property is a great tool to demonstrate how a box can be neatly cut off at its

According to the specifications outlined in this resource, In situations where overflow occurs, the 'overflow' property determines if a box is clipped to its padding edge. Additionally, it specifies whether or not a scrolling mechanism will b ...

htmlcss

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

javascriptjqueryhtml

Changing the text color of Material UI Accordion Summary upon expansion

How can I update the color of an Accordion summary text in Material UI when it is expanded? <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}> <AccordionSummary ...

javascripthtmlreactjsmaterial-uiaccordion

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...

javascripthtmljquerycss

Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should ...

javascriptjqueryhtmlcss

The hover effect does not function on an SVG element when it is placed within an external file

I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...

csssvgsvg-animate

Bootstrap - the input group button is designed to align to the right side

Currently, I am in the process of constructing a navigation bar for a website that includes a search bar and a grouped button. Everything functions properly when viewed on a desktop, but as soon as I switch to mobile view and the collapsible menu is activa ...

htmlcsstwitter-bootstrap

Exploring the integration of Construct 3 objects with ReactJs

Although I am well-acquainted with Construct 3 platform, I now have an interest in website development. Specifically, I would like to incorporate a character-like object into my web project that moves similar to a game character. While I know how to achiev ...

htmlreactjsgame-developmentconstruct-2construct-3

Reading JavaScript files using the HTML 5 File Reader

Currently, I am working on a feature that allows users to drag and drop a folder containing JavaScript files into an HTML5 page. Here is the code snippet for my implementation: $scope.files = []; //Establish dropzone var dropbox; dropbox = document.getEle ...

javascriptangularjshtmlfilereader

Display a single unique value in the dropdown menu when there are duplicate options

Hey there, I'm currently working on retrieving printer information based on their location. If I have multiple printers at the same location, I would like to only display that location once in the dropdown menu. I am aware that this can be resolved at ...

javascripthtmlasp.netangulartypescript

Conceal the div if it remains unhidden within the following 10 seconds

This piece of code is designed to show a loader image until the page finishes loading. Here is the code snippet: document.onreadystatechange = function () { var state = document.readyState if (state == 'interactive') { $('#unti ...

javascriptjqueryhtmlajax

What process allows for this Twitter API response to be converted into HTML format automatically?

It is common knowledge that Twitter operates in an API-centric manner, meaning all Twitter apps retrieve their data through the API. Upon accessing (or .xml for those who prefer), a JSON formatted result with plaintext content and no additional formattin ...

htmlxmljsonapitwitter