Horizontal alignment of Bootstrap columns is not working as expected

While attempting to integrate Bootstrap elements into my portfolio, I encountered issues with aligning columns. Currently, the only columns I have added are in the "welcome-section" (Lines 40-52), but they refuse to align horizontally.

I've tried troubleshooting by experimenting with different containers, rows, sizes, gutters, and styles, but so far, nothing has worked. Could the problem be caused by an element in my style.css file? If so, can you identify the issue? It's always a challenge for me to revisit sites and update them with new code.

Your help is greatly appreciated as I'm completely stuck!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Within your code snippet, you have initiated a new child row element within the #name row by placing an immediate child column div.

Remember to avoid starting child rows within another row element. The correct order should always be .row > .col > .row > .col, and so on...

Avoid doing this: .row > .row > .col as it may produce unexpected results 🤔

The general rule is to nest child columns within rows only, while rows can be nested within columns or other block elements. 👍🏼

Hopefully, following these guidelines will set you on the right path! 🙌🏼

* {
  margin: 0;
}

html,
body {
  margin: 0;
  font-family: roboto;
  scroll-behavior: smooth;
}
...

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
...

</script>

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

Is there a way to prevent one accordion pattern from automatically closing when another one is opened?

I'm currently working on a code that involves accordion patterns, and I've encountered an issue where opening and closing one accordion automatically closes another. I want all accordions to remain open until the user explicitly clicks to close t ...

htmlcssbootstrap-4

I am experiencing issues with my Ajax code where it is not successfully sending data to the server and

Can someone help me troubleshoot my PHP AJAX code? I am new to PHP and just getting started with learning AJAX. index.html: <html> <head> <script> function sendmessage(str) { var xmlhttp; if (window.XMLHttpRe ...

phphtmlajax

Unable to access placeholder information from the controller

I am new to implementing the mean stack. I attempted to view data from the controller, but encountered an error message in the web browser's console. Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl Stack ...

javascriptangularjshtmlexpress

Having difficulty finding the close button in a pop-up window while using the Selenium library with Python

While using chromedriver to open the website mentioned below in my extract_data() function, I encountered a problem with dismissing a pop-up message by clicking the 'x' button. Surprisingly, it seems to click the wrong button instead. What' ...

pythonhtmlgoogle-chromeselenium-webdriver

The function onClick does not function properly when used with the <p> element, but it works flawlessly with the <button> element

export function SignoutButton() { return ( <p onClick={() => signOut({ callbackUrl: "/" })}> <IoIosLogOut /> Logout </p> ); } I was struggling with a function in my next.js project that wasn't wo ...

javascripthtmlnext.jsonclick

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

javascriptcssdo-while

What is the best way to retrieve the dates for the current month as well as the following month

I have a php script that I need to modify in order to display the current month and the next month's dates using PHP. Below are the functions I am currently using for this purpose. html/php code (functions for current month and next month): <!-- D ...

phphtmldate

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other. I have attempted to use flex-direction:row; for the explanation ...

htmlcssflexbox

Is it possible to alter CSS based on the width of the webpage using javascript

We are currently developing a web application that will be deployed on various devices such as mobile phones, iPads, iPhones, and Android. Instead of using user agents to show different views, I prefer having CSS that adjusts based on the screen width. We ...

javascriptjquerycss

Using CKEditor in an AngularJS web application: Tips and tricks

I'm having trouble integrating the ckeditor into an HTML page that's built with angularjs. Despite trying out numerous examples, such as the ng-ckeditor and ckeditor directives, I haven't found a solution that works for me. What I need is ...

javascriptjqueryhtmlangularjsckeditor

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

I have a page called one.html that has a link on it <a href="#">Click to open second page<a/> When this link is clicked, I would like for second.html to open in a popup modal. The second page contains a basic table that I want to di ...

javascripthtml

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Automatic keyboard suggestions not working for HTML search input using Ajax

I am currently working on a PHP web application that uses a MySql database. I have implemented a search suggestion box using ajax. The issue I am facing is that the suggestions can be selected with the mouse and auto-completed, but not when using the keybo ...

phphtmlcssajax

What is the point of the horizontal scroll bar in WP Thesis?

There seems to be a horizontal scroll bar appearing at the bottom of my site, even though there is no content extending beyond the visible area. Can anyone provide guidance on how to fix this issue? My website is built on Wordpress 3.0 and utilizes the Th ...

htmlcsswordpresswordpress-thesis-theme

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

javascripthtmljquerycss

Automatically focus on new page when button is clicked (in a separate HTML file)

I successfully added auto-focus functionality to a button that opens a modal using the code below: Created with AngularJS: app.directive('autoFocus', function($timeout) { return { restrict: 'AC', link: function(_sc ...

htmlangularjsautofocus

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg

The jQuery script version 3.5.1 encountered an error at line 4055 where DataTables was unable to access the property "aDataSort" due to it

Hey there, I'm currently facing a small challenge while trying to incorporate Datatables within a bootstrap modal to display the results of a SQL Server query. The main requirement is to provide the option to export the data as an Excel file or in oth ...

javascriptphpjquerybootstrap-4datatables

Unable to change the background color of h1 tag in a ReactJS project

import React from 'react' export default function Home(){ return<div> <h1 className="bg-dark text-white p-3">Home Page</h1> </div> } I am attempting to modify the background color of the h1 tag in my Reac ...

javascriptcssreactjsbootstrap-4