Delete the gridline of the column

I'm struggling to remove the border that is encircling my image thumbnail label. I attempted to create a new class "noborder" and added it under my .col-md-4.noborder css rule, setting the border to 0 none and box-shadow to 0 none but unfortunately it did not work. Can someone please offer assistance with this issue?

.col-md-4.noborder {
    border: 0 none;
    box-shadow: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>J2EE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script
         src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/navbarscroll.js"></script>
      <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   </head>
   <body> 
          <div class="container">
         <div classs="row">
            <div class="row">
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer №1

The border is currently applied to the thumbnail element. To eliminate it, follow these steps:

.thumbnail {
  border: 0 !important;  
}

Answer №2

Modify the CSS for the border of .thumbnail

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

Customize the border using your own CSS styles.

.thumbnail{
  border: none;
}

Answer №3

Is it possible to apply the noborder class to the thumbnail div?


      <div class="col-md-4">
          <div class="thumbnail noborder">
             <img src="..." alt="...">
             <div class="caption">
                <h3 align="center">Thumbnail label</h3>
                <p align="center">...</p>
             </div>
          </div>
       </div>
       <Style>
         .noborder {
         border: 0 !important; 
         }
       </style>

Alternatively, you can use:

.thumbnail {
 border: 0 !important;  
 }

Answer №4

Your .col-md-4 does not have a border property set. Adding a no border setting will not make any difference since it originally had no border.

If you want to specifically remove the border from .thumbnail in .col-md-4.noborder, you can use the code snippet provided below.

.col-md-4.noborder .thumbnail, .col-md-4.noborder .thumbnail img {
    border: 0 none;
    box-shadow: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <title>J2EE</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <script
         src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script
         src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/navbarscroll.js"></script>
      <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   </head>
   <body> 
          <div class="container">
         <div classs="row">
            <div class="row">
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
               <div class="col-md-4 noborder">
                  <div class="thumbnail">
                     <img src="..." alt="...">
                     <div class="caption">
                        <h3 align="center">Thumbnail label</h3>
                        <p align="center">...</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

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

Using Jquery to toggle classes between "display block" and "display none

Hello friends, I'm in need of some help with my code. $(document).ready(function() { var circle = $('.circle'); $(".send a").click(function(e) { e.preventDefault(); $('.wrap').css('display', 'bl ...

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

Sorting through a collection of subarrays

Within my application, the structure is set up as follows: [ ["section title", [{ item }, { item } ... ]], ["section title", [{ item }, { item } ... ]], ... and so forth When displayed in the view, the sections are placed in panels, with their internal ...

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

Encountered a JQuery error in the application: trying to call the 'open' method on dialog before initialization is complete

I am having trouble integrating a dialog box into my application and encountering the error mentioned above. Here is the jQuery code I'm using: $( "#dialog" ).dialog({ autoOpen: false, width: 450, modal: true, ...

Unable to retrieve HTML content through a Node.js server

I created a HTML webpage that includes .css, images and JavaScript files. However, when I start my node server using the command below: app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); The webp ...

Lists are not limited to only <li> elements and elements that support scripts (<script> and <template>)

While testing my webpage's accessibility in Google Chrome Lighthouse, I encountered the following error. I am aware of the significance of properly structured lists in enhancing webpage accessibility. It is perplexing for me to receive this error desp ...

A comprehensive guide on creating a package that combines an href link with an <li> element

I am currently using the <li> tag to display href links. The issue I am facing is that when I click on the 'box,' it does not directly link to another page. Instead, I have to click on the href link for it to redirect to another page. Is th ...

Is there a way to modify the domain of an iFrame's scr based on the parent window's URL?

Is there a way to dynamically change the scr="" attribute of an iFrame based on the current URL of the window? The goal is to have different values for the scr attribute depending on the parent window's URL. For example, if the parent window's UR ...

Storing the information received from an API as an HTML element

My HTML file contains JavaScript, along with a URL that displays data retrieved from an AWS lambda API call via AWS API Gateway. The page initially appears blank and the data is structured like this: [ {"user": "bob", "groups": ["bobsGroup"], "policies": ...

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

Tips on Including a Custom Header in an Ajax Request for a Cross-Domain JsonP Call

Is there a way to add a custom header using an ajax call in jQuery for a cross-domain JSONP call? I am making a web service call in an HTML page using Ajax cross-domain call. I am currently using JSONP and now need to send some parameters in the header. ...

Embed full content in iframe using bootstrap 4

Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

What is the best way to display all checked checkboxes even when the page is reloaded?

I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...

Showing information from the data text option

I'm having trouble displaying text below the cube. The code works fine in a standalone fiddle, but it doesn't work when I incorporate it into my project. Can someone help me figure out how to show the value of data-text="Cube1"? Code t ...

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...