Achieving Div Alignment in a Fluid Bootstrap Grid

I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I find it hard to believe that centering some divs could be this challenging. Where am I going wrong? Please refrain from marking this as a duplicate. I have spent the entire day researching this issue but still cannot figure it out. Thank you

<header data-spy="affix" id="myHeader" class="container row">
            <div class="col-sm-4 ">
                <div class="centralize">
                        <a href="http://www.facebook.com" target="_blank">
                        <img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.twitter.com" target="_blank">
                        <img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.instagram.com" target="_blank">
                        <img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>

                </div>
            </div>  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>                  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>          
    </header>
htmlcsstwitter-bootstrapcentering

Answer №1

Using {margin:0 auto; width:50%} should actually do the trick.

However, I noticed that in your code, you're applying the .col-sm-4 class to the parent div which only occupies 1/3 of the width. Maybe try using .col-sm-12 instead, which takes up the full 100% width.

Answer №2

If you want to center align the text inside the class="centered" divs, simply add the following CSS:

.centered {
    text-align: center;
}

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

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

javascripthtmljquerycss

What is the method for centering text above and below an image in the vertical middle?

I'm struggling to create a vertical center-aligned image gallery on my website with "PREVIOUS" and "NEXT" links for easy navigation. Despite multiple attempts, I can't seem to get it right. Can someone guide me on how to achieve this effect? ...

htmlcssimagealignmentvertical-alignment

Angular UI Bootstrap Typeahead - Apply a class when the element is added to the document body

In my current project, I am utilizing angular bootstrap typeahead with multiple instances. Some of these instances are directly appended to the body using the "typeahead-append-to-body" option. Now, I have a specific instance where I need to customize the ...

javascriptangularjstwitter-bootstrapobject-referenceangular-ui-typeahead

Having an absolute element can lead to overflow causing a scroll

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .wrap { ...

htmlcsscss-positionoverflow

Tips for effectively showcasing the counter outcome amidst the increase and decrease buttons

Currently, I am in the process of learning Angular and have created a component called quantity-component. Within the quantity-component.component.html file, I have implemented 2 buttons for increment (denoted by +) and decrement (denoted by -). The decrem ...

javascripthtmlnode.jsangularbootstrap-4

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

htmlcsscss-selectors

Incorporating CSS code directly into a PHP webpage instead of linking to an external CSS

I've been struggling to find a solution for this issue. I am trying to figure out how to insert CSS code into my PHP page. My PHP page contains scripts and uses echo to display HTML elements when the page loads. Among these elements are three forms w ...

phphtmlcss

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functio ...

javascripthtmlcssgoogle-chrome-extension

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

htmlcssangularlayoutangular-material

The functionality of Bootstrap Tabs is compromised when used within a jQuery-UI dialog window

My goal is to develop a user interface similar to MDI for my application. To achieve this, I am utilizing the dialog feature of the jQuery UI library. To dynamically create a dialog window on demand, I have coded a helper function as shown below: functio ...

javascriptjqueryajaxtwitter-bootstrapjquery-ui

The Video Element Is Not Expanding to Fill the Entire Parent Div

My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I' ...

htmlcss

Homepage divided in two sections akin to the Tumblr landing page

Have you ever visited www.tumblr.com and noticed the '30 reasons...' link on the registration page that slides up and reveals a second page? I've been trying to figure out how they achieve this cool effect. Most tutorials show how to scroll ...

javascriptjqueryhtmlcss

Tips for creating a transition effect when hovering over a CSS sprite

Below is a snippet of my CSS sprite code: #IconSet a { width: 36px; height: 36px; display: inline-block; } #DeviantArtIcon { border-width: 0px; border-style: none; background-image: url(http ...

csshovercss-transitionstransition

Trouble with updating scope values in the view within IONIC 1 and AngularJS

I recently implemented a feature to save the two most recent login details. The functionality works correctly, but I'm facing an issue where my view only updates upon refresh even though the scope values are being updated. I've tried using $scop ...

htmlangularjsionic-frameworkscope

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

javascriptjqueryhtmlcsstabs

retrieving the selected checkbox value

My challenge is to extract the values of dynamically changing checked checkBoxes on my webpage. For example: while ($row=myqli_fetch_array($result)){ echo"<div>"; echo"<select id=\"course\" onchange=getCheckBox()> <opt ...

javascriptjqueryhtmlajax

Animating a div in jQuery by creating a duplicate

I've spent hours scouring Google and StackOverflow for a solution to this particular issue I'm facing, but haven't been able to find one. Here's the problem: I'm currently in the process of creating a shopping website. When a user ...

javascriptjqueryhtmlcss

Changing the order on mobile devices in Bootstrap 4: A quick guide

Currently, I am working on a responsive layout using Bootstrap 4 with two columns. Each column contains a total of 9 divs - four in the first column and five in the second column. My goal is to rearrange the order of the divs within the columns when the vi ...

htmlcssbootstrap-4

Implement varying styles in React components

In my React project, I am attempting to create a unique progress bar with custom styling. Specifically, I have a dynamically calculated percentage that I want to assign as the width of a div element. Initially, I tried achieving this using Tailwind CSS: &l ...

javascriptcssreactjstailwind-css

Reveal and conceal information with a customized web address

I have a PHP and MySQL blog that I want to display in a div using show and hide JavaScript functions. Everything works fine with other divs, but the issue arises when clicking on a vanity URL causing my webpage to refresh every time it's clicked. The ...

javascriptphpjqueryhtmlvanity-url