Bootstrap does not support horizontal alignment of columns

I can't seem to get my columns to align horizontally in bootstrap. I want the image on the left and the text on the right, but they keep stacking vertically. Can someone help me with this?

As far as I know, col-md-6 should divide the page into 2 columns, and col-xs-12 should stack them vertically on mobile, but it's not working that way for me. Am I unknowingly overriding the default bootstrap css?

https://i.sstatic.net/kSAYZ.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
      crossorigin="anonymous">
    <style media="screen" type="text/css">
      img {
        width: 100%;
      }
      .btn {
        margin: auto;
      }
      .vertical-center {
        height:100%;
        width:100%;
      }
      .left-text {
        text-align: left;
      }

    </style>
  </head>
  <body class="verticalcenter">
    <div class="container vertical-center">
      <div class="col-xs-12 col-sm-12 col-lg-6">
        <img src="./profile.jpg">
      </div>
      <div class="col-xs-12 col-sm-12 col-lg-5">
        <div class="row left-text">
          <div class="col-xs-12 col-md-8">
            <h2>MyStackFlowethOver</h2>
          </div>
          <div class="col-xs-12 col-md-8">
            <h4>web developer</h4>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="#" class="" role="button" target="_blank">github</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="#" class="" role="button" target="_blank">linkedin</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="3" class="" role="button" target="_blank">twitter</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="/blog" class="" role="button" target="_blank">blog</a>
          </div>
          <div class="col-xs-12 col-md-8">
            <a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
htmlcssbootstrap-4

Answer №1

It is important to include a <div class = "row"> for each row of content you want to add in order to maintain your layout properly.

Here is an example using your code:

<div class = "row">
   <div class="col-xs-12 col-sm-12 col-lg-6">
     <img src="./profile.jpg">
   </div>
</div>

Repeat this pattern for each row of content you want to insert.

Answer №2

This solution should address your problem.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Web Page Title</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
          crossorigin="anonymous">
        <style media="screen" type="text/css">
          img {
            width: 100%;
          }
          .btn {
            margin: auto;
          }
          .vertical-center {
            height:100%;
            width:100%;
          }
          .left-text {
            text-align: left;
          }

        </style>
      </head>
      <body class="centeredvertically">
        <div class="container vertical-center">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-lg-6">
                <img src="./profile.jpg">
            </div>
            <div class="col-xs-12 col-sm-12 col-lg-5">
                <div class="row left-text">
                <div class="col-xs-12 col-md-8">
                    <h2>MyStackOverflowProfile</h2>
                </div>
                <div class="col-xs-12 col-md-8">
                    <h4>Front-End Developer</h4>
                </div>
                <div class="col-xs-12 col-md-8">
                    <a href="#" class="" role="button" target="_blank">GitHub Profile</a>
                </div>
                <div class="col-xs-12 col-md-8">
                    <a href="#" class="" role="button" target="_blank">LinkedIn Profile</a>
                </div>
                <div class="col-xs-12 col-md-8">
                    <a href="3" class="" role="button" target="_blank">Twitter Account</a>
                </div>
                <div class="col-xs-12 col-md-8">
                    <a href="/blog" class="" role="button" target="_blank">Personal Blog</a>
                </div>
                <div class="col-xs-12 col-md-8">
                    <a href="./resume.pdf" class="" role="button" target="_blank">Resume Download</a>
                </div>
                </div>
            </div>
          </div>
        </div>
      </body>
    </html>

Answer №3

Just a heads up, in Bootstrap-4 there isn't a class called col-xs-*, so instead of using col-xs-12, switch it to col-12. Also, don't forget to wrap your two columns with the row class. I took a look at your code and noticed that you also need to include a meta tag in the head section for a responsive site.

Below is the updated code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <style media="screen" type="text/css">
        img {
            width: 100%;
          }
          .btn {
            margin: auto;
          }
          .vertical-center {
            height:100%;
            width:100%;
          }
          .left-text {
            text-align: left;
          }
    </style>
</head>
<body class="verticalcenter">
    <div class="container vertical-center">
        <div class="row">
            <div class="col-12 col-sm-12 col-lg-6">
                <img src="./profile.jpg">
            </div>
            <div class="col-12 col-sm-12 col-lg-5">
                <div class="row left-text">
                    <div class="col-12 col-md-8">
                        <h2>MyStackFlowethOver</h2>
                    </div>
                    <div class="col-12 col-md-8">
                        <h4>web developer</h4>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="#" class="" role="button" target="_blank">github</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="#" class="" role="button" target="_blank">linkedin</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="3" class="" role="button" target="_blank">twitter</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="/blog" class="" role="button" target="_blank">blog</a>
                    </div>
                    <div class="col-12 col-md-8">
                        <a href="./resume.pdf" class="" role="button" target="_blank">resume</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I hope this helps! Happy coding :)

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

Exploring the World with the vue-i18n Plugin

Recently, I have integrated translation into my app and now I am looking to implement a button event that allows users to change the language on the home page. For this task, I referred to two tutorials: Localization with Vue and Localization with Vue Tut ...

javascripthtmlvue.jslocalizationvue-i18n

I'm looking to position the vibrant red box at the bottom of the screen, right under the navigation bar. However, every time I try to

I'm struggling to align the full-screen red box under the navigation bar. I've tried using flex properties but it's not working as expected. My goal is to have the red box at 100% width and be responsive. Could it be something with my nav b ...

htmlcssbootstrap-4

Issue with modal rendering in Bootstrap4 when the body is zoomed in

I am encountering an issue with a Bootstrap html page where the body is zoomed in at 90%. The Bootstrap modal is displaying extra spaces on the right and bottom. To showcase this problem, I have created a simple html page with the modal and body set to 90% ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Achieving Perfect Alignment for Absolutely Positioned Divs in

I'm currently facing an issue where the image I'm trying to center horizontally also moves the parent div downward when I try to vertically center it using top-margin. This is not the desired outcome. If you'd like to see what I mean, I&apo ...

htmlcsslayout

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

csstailwind-css

Filtering data within a specific date range on an HTML table using JavaScript

I am attempting to implement a date filtering feature on my HTML table. Users should be able to input two dates (From and To) and the data in the "Date Column" of the table will be filtered accordingly. The inputs on the page are: <input type="date" i ...

javascripthtmlhtml-table

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

htmlcssinternet-explorerinternet-explorer-9

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

My website has numerous images with base 64 string sources. Typically, I am able to download the HTML page as a PDF using a service method that involves sending the HTML page with a JSON object and receiving the PDF in return. However, when there are many ...

javascripthtmljsonpdfbase64

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

javascriptjqueryhtmlcss

Utilizing multiple classes in HTML for a button element

  I've recently come across the concept that elements can have multiple classes. It's interesting, isn't it? .rfrsh-btn { background-image:url(../../upload/rfrsh_nb_grey.png); ... } .submit { font-size: 0.85em; paddi ...

htmlcssclass

What is the best way to position two elements inline?

I was trying to create a container named project-item that looks like the image linked below: https://i.stack.imgur.com/6XzZ9.png My goal was to align the project logo and the title (h3) in one line, but I struggled to find a suitable solution. This is ...

htmlcss

Using jQuery in Yii: Detecting when a radio button loses its checked state

Here is the code regarding the issue at hand: <script> $(function(){ $('#widgetId-form input[name="valueType"]').change(function(){ if ($(this).is(":checked")) { console.log("enabling "+$(this).data("class") ...

javascriptjqueryhtmlyii

Basic click event triggered every second click in JavaScript and HTML

onclick="HandleAction(\'playnow\');HandleAction(\'stop\');" This element performs two functions simultaneously. However, it only executes the actions \playnow\ and then \stop\ immediately after. ...

javascripthtml

How to override an event in JavaScript when a specific value is entered

I am looking to implement a system with complex conditions. The goal is to have an alert appear when a value is inputted and the button is clicked. First, a confirmation message Have you input ? should be displayed, followed by clicked with input. If no va ...

javascripthtml

Leveraging Javascript/jquery to retrieve image data for a specific frame within a video

Query My aim is to optimize the code for image manipulation on a web browser using JavaScript. One possible solution I am considering is utilizing a video file to reduce HTTP requests. Is there a way to extract a single frame from a video in png, jpg, or ...

javascriptjqueryhtmlvideo

The unattractive visual outcome of Three.js rendering

My goal is to generate a 3D map of buildings using Three.js, based on a 2D SVG file. The process involves taking each path from the SVG, utilizing transformSVGPath from d3.js to create a shape, and then extruding it as shown below: var material = new THRE ...

htmlsvgd3.jshtml5-canvasthree.js

Updating HTML input fields via AJAXIncorporating AJAX

Let's take a look at our database: ID Name Price 1 product1 200 2 product2 300 3 product3 400 Now, onto my form: <form action="test.php" method="post" /> <input type="text" name="search" id="search" placeholder="enter ...

phpjqueryhtmlmysqlajax

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

c#asp.nethtmlvisual-studio-2010calendarextender

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

javascriptcssvue.jsvuejs2