Personalizing the design of Bootstrap

As a beginner in working with Bootstrap, I am currently focused on creating an index html page for an online shop. For reference, here is an example - https://jsfiddle.net/a393wtng/1/ Upon resizing the output frame, it becomes apparent that 4 products can be accommodated in each 'row'

I intend to introduce margin spacing 

margin-left:7px;
margin-right:7px;

to every product (lines 24, 25) within the css file. However, doing so results in only 3 products being displayed in each 'row'. I experimented with reducing the image size slightly to decrease the product width, yet this led to unexpected outcomes: identical product widths and left alignment of internal elements -

Therefore, I have three inquiries:

  1. How can margin-left and right be added to the product while maintaining 4 products per 'row'?
  2. What steps can be taken to prevent "padding-left" when modifying the image size?
  3. I would greatly appreciate any suggestions pertaining to the html/css/bootstrap code.
htmlcsstwitter-bootstrap

Answer №1

Here are some key takeaways to consider:

  1. Upon reviewing the source code on your JSFiddle frame, I noticed that you're utilizing the bootstrap v4 CSS files. It's important to note that there may be variations in spacing between v3 and v4, as a significant amount has been reworked for v4. My insights are primarily based on my experience with v3.
  2. When working with bootstrap, it's advisable to create custom CSS that alters the padding rather than the margin, particularly for adjustments in left and right (top and bottom adjustments usually work fine).
  3. As suggested by @Banzay, incorporating a new <div> with the class product within the existing col-sm-3 div would be beneficial.
  4. After separating the divs as mentioned in point 3, you'll observe that the col-* divs already have preset padding values (this adjusts depending on their placement within a row - first, middle, or last divs).
  5. To achieve vertical spacing, simply set the top and bottom padding accordingly. It is recommended to pad the top of the col-md-10 div and the bottom of each product div. Note that the product CSS class may not serve any distinct purpose at this stage.

I've made revisions to your JSFiddle HTML and CSS:

HTML:

<div class="col-md-10 border padding-top">
    <div class="col-sm-3 padding-bottom">
        <div class="product grey-border round-border">
            <img class="img-thumbnail" alt="Default product image" src="http://buytimg.dailyhunt.in/images/def_product.png">
            <h4>Title of Product</h4>
            <p>Product description</p>
            <h2 style="text-align: center">
                <span class="tag tag-success" style="width:100%">10 000$</span>
            </h2>
            <a href="#" class="btn btn-primary btn-block" role="button">Add to Cart</a>
        </div>
    </div>
</div>

CSS:

.border{
    border:1px solid grey;
}
.grey-border{
    border:1px solid #ddd;
}
.round-border{
    border-radius:10px;
}
.padding-top{
    padding-top:30px;
}
.padding-bottom{
    padding-bottom:30px;
}
.font-size-18{
    font-size:18pt;
}

Warm regards,
Michael

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

jQuery's :last selector allows you to target the last

I need assistance with my jQuery code $('#share_module:last').css("background-color","red"); Unfortunately, it is only affecting the first #share_module Here is an example of the HTML structure: <div id = "share_module" class = "id of the ...

javascriptjqueryhtml

I am attempting to design an HTML page to serve as the body of an email. Can anyone advise me on how to effectively pass it into my setBody() function while using yiiMail?

On one of my .php pages, I have the following code snippet: <html> <head></head> <body> Hi <?php echo $user['first_name'].' '.$user['last_name']?>, <br><br> To reset your ...

phphtmlemailyii

I'm having trouble getting CSS to apply to my HTML file. Any idea why?

I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on eleme ...

htmlcss

Return to the previous URL after executing window.open in the callback

I need help redirecting the callback URL back to the parent window that initially called window.open. Right now, the callback URL opens inside the child window created by the parent. Here's the scenario: The Parent Window opens a child window for aut ...

javascripthtmlangularjs

What are the steps to get an Icon to intersect with a v-app-component in a Vuetify project?

The locket is not overlapping with the v-app-bar. How do I make sure they intersect? <template> <v-app-bar :elevation="2" rounded> <v-row class="z-index"> <v-col cols="12" class="d-flex flex-column justify-center align ...

htmlcssvue.jsvuetifyjs3

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Using Angular with OpenStreetMap and $routeProvider allows for dynamic routing and

Check out this awesome single page app that I found: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/simple-example.html However, I am looking to enhance it by adding a menu... <html ng-app="App"> <head> <lin ...

javascriptjqueryhtmlajaxangularjs

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

htmlmacosoperating-system

Discover the Magic of CSS Animation

I am not experienced in CSS animations and have limited knowledge about animations. I am trying to create an animation where a grey box slides down from the top line above the login/register section, but currently it only fades in. If anyone can provide an ...

javascripthtmlcssanimationcss-animations

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Currently, I am utilizing the Grid-A-Licious plugin for my project. It functions perfectly when used on a single page with one call to the plugin. However, due to my design requirements, I need to implement it within 3 tabs on the same page. Unfortunately, ...

jqueryhtmlcsstwitter-bootstraptabs

Discover the best way to enable lint support for MUI `sx` prop values

Despite attempting the method below, I am still unable to receive lint support to identify incorrect style properties and values. import { SxProps, Theme } from "@mui/material"; export const navBarStyles: Record<string, SxProps<Theme> | ...

cssreactjsmaterial-uilint

The footer and login form are tangled up in a web of confusion

Here is my HTML code for a login form: <div class="middle-box text-center loginscreen"> <div> <form class="" role="form" action="index.html"> <div class="form-group&q ...

htmlcsstwitter-bootstrap

Changing the loading spinner icon in WooCommerce

Could someone help me change the loading spinner icon in WooCommerce? The current icon is defined in the woocommerce.css: .woocommerce .blockUI.blockOverlay::before { height: 1em; width: 1em; display: block; position: absolute; top: 50 ...

phpcsswordpresswoocommercespinner

I'm encountering an issue with my CSS image slider as it does not seem to be functioning properly on Google Chrome, yet

CSS: @-moz-keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 90% { left: -300%; } 95% { left: -400%; } 10 ...

css

Building a bespoke search input for the DataTables JQuery extension

As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purp ...

javascriptjqueryhtmlcssdatatable

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

The NextJS Link component does not seem to be receiving the styles from Tailwindcss

I am currently working on a nextjs frontend project that has tailwindcss integrated. Below is an example of the code I am using: import Link from 'next/link' return( <div> <Link className="text-sm hover:text-gray-600" ...

htmlcssnext.jsfrontend

position the tooltip within the ample available space of a container in an angular environment

In my editor, users can create a banner and freely drag elements within it. Each element has a tooltip that should appear on hover, positioned on the side of the element with the most space (top, left, bottom, right). The tooltip should never extend outsid ...

javascripthtmlangulartypescriptangular-cdk-drag-drop

Resize lowercase letters to fit the box model

Currently, I am in the process of enhancing the python word cloud library available here by adding an HTML export option alongside the existing image export feature. The main challenge I'm facing right now is related to how the underlying python imag ...

htmlcssfontswebfonts

Achieving horizontal alignment for divs in CSS can be challenging

Struggling to align three circular divs on my webpage, here's the code: <div class="row"> <div class="large-9 push-2 columns"> <div class="green"></div> <a href="#">Donnez</a> </div> <div cl ...

htmlcsszurb-foundation