Remove the inner spacing in Bootstrap to ensure fluid responsiveness

I am struggling to align a set of six social media icons to the top right corner of my WordPress storefront. I have placed this container above the header section using Bootstrap, but the space between columns is too wide. I am open to suggestions with or without utilizing Bootstrap.

Here's what I've attempted:

<div class="container-fluid">
    <div class="row no-gutter" >
        <div class="col-md-6"   style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
    </div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-247" src="#iconfinder_instagram_circle_color_107172-e1547916926464.png" alt="" width="28" height="28" /></div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-246" src="#iconfinder_youtube_circle_color_107167-e1547916948298.png" alt="" width="28" height="28" /></div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-245" src="#iconfinder_pintrest__social__media__icon_2986063-e1547916959860.png" alt="" width="28" height="28" /></div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-244" src="#iconfinder_google_circle_color_107180-e1547916968579.png" alt="" width="28" height="28" /></div>
    <div class="col-md-1"><img class="aligncenter size-full wp-image-242" src="#iconfinder_twitter_circle_color_107170-e1547916988283.png" alt="" width="28" height="28" /></div>
    </div>
</div>

css

/* remove spacing between middle columns */
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
}

/* remove right padding from the first column */
.row.no-gutter [class*='col-']:first-child {
    padding-right:0;
}

/* remove left padding from the last column */
.row.no-gutter [class*='col-']:last-child {
    padding-left:0;
}


/* only for column content visible */
.col-md-1>div {background-color:#ddd;}

Please review the code on CodePen here.

Actual Issue:

https://i.sstatic.net/9SEFZ.jpg

csswordpresstwitter-bootstrapheaderbootstrap-4

Answer №1

If you want to center an element vertically, you can utilize the bootstrap align class called align-middle.

For example:

<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>

Answer №2

The issue arises from assigning each image to its own column, causing all columns to expand equally as the page lengthens, resulting in larger spaces than necessary around the images.

To resolve this, consolidate all images into a single column and adjust its size to col-md-6.

 /* eliminate space between middle columns */
  .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
  }
  /* remove right padding from first column */
  .row.no-gutter [class*='col-']:first-child {
    padding-right:0;
  }
  /* remove left padding from first column */
  .row.no-gutter [class*='col-']:last-child {
    padding-left:0;
  }


  /* applicable only to visible column content */
  .col-md-1>div {background-color:#ddd;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

 <div class="container-fluid">
    <div class="row no-gutter" >
        <div class="col-md-6"   style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
    </div>
  <div class="col-md-6"><img class="aligncenter size-full wp-image-240" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-247" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-246" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-245" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-244" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-242" src="https://via.placeholder.com/28" alt="" width="28" height="28" /></div>
    </div>
  </div>

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 standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Encountering the error message "POST requests necessitate a Content-length header" while executing Curl code

I am attempting to retrieve an Auth2 token using this curl request: define("CALLBACK_URL", "http://localhost/los/index"); define("AUTH_URL", "https://accounts.google.com/o/oauth2/auth"); define("ACCESS_TOKEN_URL", "https://oauth2.googleapis.com/token"); ...

phpcurloauthheadertoken

Strategies for managing security in a JavaScript form that contains conditional fields

I'm currently working on my very first custom form from scratch using JavaScript and PHP (on a WordPress site). I have encountered some security issues. My approach involves creating a conditional form, where I am utilizing CSS to hide and show certa ...

javascriptjquerywordpressforms

How can I configure my WordPress website to direct to index.html in the diste/templates directory rather than the default WordPress behavior?

I'm currently working on a headless WordPress website using Vue.js, and I've created a custom theme called vue-wordpress. The theme was set up using Vue CLI. Below is the layout of the directory: dist assets templates public src templates fun ...

wordpressvue.js

How can you utilize positioning and margins with Flexboxes?

<template> <div class="flex justify-center"> <div class="h-px-500 md:w-1/6 bg-orange-200 text-center">1</div> <div class="h-px-500 md:w-1/6 bg-orange-300 text-center">2</div> <div class="h-px-500 md:w-1/ ...

htmlcssvue.jstailwind-css

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

Creating a semi-circular shaped rectangle using CSS

Is it possible to achieve the unique rectangle borders shown in the image using border-radius or any other CSS property? Here's what I'm trying to create: https://i.sstatic.net/YKPEW.png Currently, this is what I've been able to achieve us ...

htmlcss

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

htmlcssbootstrap-4

Is there a specific HTML tag available to instruct the browser to cache my HTML and/or CSS files for future use?

Up to this point, my research has indicated that enabling JavaScript and CSS browser caching typically requires server side settings such as .htaccess. Is there any HTML tag or configuration within the HTML page or JavaScript that can instruct the browse ...

javascriptcsscachingbrowser-cache

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Hey there! So, I've got this cool interactive banner on my website. It features 2 slider sections with some awesome products on the right side. The layout is responsive, meaning that when you switch to a mobile screen size (around 515px or less), the ...

javascriptjqueryhtmlcssresponsive-design

Django: Implementing Subdirectory Structure for Static Files

My static files are organized as follows: /static base.css /core /css style.css /js stuff.js When accessing these files locally using href="/static/core/css/style.css", everything works correctly. However, when deploying live, ...

pythoncssdjango

Is there a way to remove the option to switch to the desktop version on Joomla 2.5 mobile view?

Is there a way to set the desktop version as the default view on my website? Also, how can I remove the option for users to switch to the desktop version when accessing the site from a phone or tablet? ...

phphtmlcssresponsive-designjoomla2.5

Guide for using JavaScript to obtain the current line position within a contenteditable div during a keypress event

I am in the process of developing a customized editor using a contenteditable div. I require a javascript code that can determine the line position of the current caret position during a keypress event. It should be able to adapt when new lines are added o ...

javascriptjqueryhtmlcss

Error encountered in WebStorm SCSS compiler related to transition and transform properties

https://i.sstatic.net/tWouB.png In my quest to build a webpage, I've encountered an issue while trying to incorporate images with transform/transition effects. The Scss compiler in WebStorm is throwing me an error. How can I resolve this problem? Pl ...

csssass

How to properly align an HTML TD element with a Div nested inside

I am encountering a situation where I have a TD tag with align="right". Inside this TD tag, there is a div element with align="left". My goal is to: Align the contents of TD to the right (in this case, the DIV) However, align all the contents inside the ...

htmlcsscss-float

AJAX request function is only successful on the first attempt

Currently, I am implementing AJAX functionality to verify whether a user-input ID exists in the database. If the ID is found, a check mark is displayed; if not, a cross mark is displayed. The issue arises when I input an ID for the first time, which is pr ...

javascriptjqueryajaxwordpress

Modify the paragraph content upon clicking

After experimenting with JavaScript to switch images, I now want to explore how to do the same with text. My dilemma lies in having 10 different paragraphs (where each link corresponds to a specific paragraph), but I'm unsure of where to input these ...

htmlcsstextparagraph

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

javascriptcssreactjsanimationreactcsstransitiongroup

Adjust grid width dynamically according to the container

I am working with a grid made up of 32x32 slots. Link to Grid Image How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile? Below is the code snippet: <style> .drag-item { pos ...

htmlcss

Attempting to align my range picker horizontally in a single row

After selecting the date range option from my dropdown button, I noticed that the date range options are stacking on top of each other instead of appearing in the same row. Has anyone encountered this issue before? One solution I attempted was adjusting th ...

htmlcssbootstrap-4