Steps for creating a border around a container Div:1. Set the width and

Seeking assistance in bordering a div with 4 fa-icons inside. The parent div is named Container, and as a result, the border is creating excessive padding on the left and right sides horizontally. Attempted nesting bootstrap grids without success. Can anyone provide guidance?

NOTE: Ensure that the padding does not exceed 1px on all sides, and position the div precisely in the center of the page.

https://i.sstatic.net/AbcTx.png HTML:

<div class="container" id="socialIcons">
        <div class="row">
            <div class="col-md-12">
              <a href="https://www.google.com">
                  <i class="fab fa-linkedin fa-3x "></i>
              </a>
              <a href="https://www.google.com" target="_blank">
                  <i class="fab fa-youtube fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-instagram fa-3x"></i>
              </a>
              <a href="https://www.google.com">
                  <i class="fab fa-github fa-3x"></i>
              </a>
            </div> 
        </div>
 </div>

CSS:

#socialIcons {
    position: relative;
    text-align: center;
    margin-top: 300px !important;
    border: 1px solid white;
    }

UPDATE: Following Jeff's solution, closer to desired outcome but still experiencing automatic padding issue particularly with the GitHub icon on the right side. Any insights on why this might be happening?

https://i.sstatic.net/0X1ic.png

htmlcssangularbootstrap-4border

Answer №1

If you want to adjust the padding on your icons, consider using my method below:

View Example

Instead of manually setting text-align: center;, simply utilize Bootstrap's class text-center. Also, note the addition of justify-content-center in the row.


    <div class="container text-center" id="socialIcons">
      <div class="row justify-content-center">
       <div class="border">
         <a href="https://www.google.com">
           <span>google</span>
        </a>
        <a href="https://www.google.com">
          <span>youtube</span>
        </a>
        <a href="https://www.google.com">
          <span>fb</span>
        </a>
        <a href="https://www.google.com">
          <span>twitter</span>
        </a>
       </div>
     </div>
    </div>

and for the CSS:


    #socialIcons {
      position: relative;
      margin-top: 300px !important;
    }

    .border {
     border: 1px solid black;
     padding: 1px;
    }

Answer №2

<div class="container" id="socialIcons">
    <div class="row">
        <div class="col-md-12" style="border: 1px solid white;">
          <a href="https://www.example.com">
              <i class="fab fa-twitter fa-3x "></i>
          </a>
          <a href="https://www.example.com" target="_blank">
              <i class="fab fa-facebook fa-3x"></i>
          </a>
          <a href="https://www.example.com">
              <i class="fab fa-pinterest fa-3x"></i>
          </a>
          <a href="https://www.example.com">
              <i class="fab fa-linkedin fa-3x"></i>
          </a>
        </div> 
    </div>

I trust the code above will be beneficial for you.

Answer №3

To achieve center alignment for your icons, there is no need to utilize the div element with class container. Simply include a div wrapper with a custom class and apply your desired styles directly to it.

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

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascripthtmlcssreactjs

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...

htmlcsstwitter-bootstrap

The final value of a loop is consistently returned each time

Creating a loop to generate objects. Action.ts public campaing:any = { 'id': '', 'campaing_code': '', 'campaing_type': '', 'start_date': this.currentDate, 'end ...

angulartypescriptangular-material

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

htmlcssflexbox

Opt for text links over browse forms

My requirement is to have a simple text link that triggers a browse-window opening. The idea is that when users click on certain words (such as 'upload an image'), a browser window appears allowing them to select and upload an image of their choo ...

htmlcssformsupload

Remove a npm package from an angular application

When I run the following command on the command line and on gitBash: npm -g uninstall angualar2piwik --save I receive the following message: up to date in 0.16s The entry is not removed from package.json, nor are the node_modules removed. I have also ...

angularnpm

What is the best way to display a poster image in a video element even if the aspect ratio of the poster image does not match the video element?

At this moment, the compatibility of this feature has been tested only in WebKit browsers. When a poster image is applied to a <video> element using the poster attribute, it appears before the user starts playing the video (default behavior). Howeve ...

htmlcsshtml5-video

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

When using Puppeteer to navigate a webpage, I typically can retrieve the full HTML content as text with this code: let htmlContent = await page.evaluate( () => document.querySelector('body').innerHTML ); However, I am currently faced with ...

javascripthtmlnode.jspuppeteer

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

javascripthtmlangulartypescript

Eliminating the 'white-space' surrounding concealed images

I am currently working on a project where I have a list of images that need to be hidden or shown based on the click event of specific <li> elements. While I have managed to achieve this functionality successfully, I am facing an issue with white spa ...

javascriptjquerycssjquery-mobile

Bottom of the page: Bootstrap dilemma

After designing two footers, I decided to use CSS with the code position: absolute for the second footer. However, this change caused issues with the functionality of the first footer. The display now appears as follows: ...

htmlcssbootstrap-4

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Is there a way to mock data through configuration in Angular 2 similar to how it's done in Ember Mirage? I'm aware that I can create my own solution using Dependency Injection and MockBackend to intercept HTTP calls and provide dummy data. Howeve ...

javascriptangularjsangular

Center alignment is not being applied to the divs with the Bootstrap class .justify-content-center

I have been attempting to insert a search form into two parent divs. No matter how I apply the align or justify utility, I am unable to center the search bar in the middle of the page as desired. <div class="col"> <div class"con ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

I'm currently working on iterating through the DOM using JQuery in order to change the color of every occurrence of the letter m. Here is what I have so far: $(document).ready(function(){ var m = "<span style='color: red;'>m</span& ...

javascriptjqueryhtmldomdom-manipulation

"Exploring the Potential of Angular's BehaviorSubject and Output

In my application, I utilize a behavior subject to load and manage data: Within my service, I have the following implementation: data$ = new BehaviorSubject({ users: [], user: {} }); constructor(​​); }​​ dispatch(action: ...

angularparentchildrenbehaviorsubject

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

javascriptcssreactjsantd

Transform your dictionary into an interactive HTML table that allows users to search through the results with ease

I have a university project where I need to exchange data via JSON using a Python script and a server, and then display it in a browser with an add and search function. The information being added includes student names, surnames, and ages. I must apologiz ...

pythonhtmljson

Angular Material: Enable Window Dragging Across Multiple Monitors

Exploring the usage of Angular Material Dialog or any other Popup Window Component. The functionality is mostly working as expected, with the exception of the last point. a) The original screen should not have a grey overlay, b) Users should be able to i ...

angulartypescriptangular-materialangular8material-dialog