How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the 

style="display: inline-block"
to each div. Can someone please assist me?

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

Below is my HTML code:

 <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="coding.jpg" />
                  <div class="card-body">
                    <h3>Coding</h3>
                    <p class="card-text">This is my primary hobby. That's why I was able to create a lot of projects.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="guitar.jpg" />
                  <div class="card-body">
                    <h3>Guitar</h3>
                    <p class="card-text">I love music. And one way I appreciate it is by playing guitar.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hobby" style="display: inline-block">
        <div class="album py-5 bg-light">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <div class="card mb-4 shadow-sm">
                  <img class="card-img-top" src="coding.jpg" />
                  <div class="card-body">
                    <h3>Mandarin</h3>
                    <p class="card-text">I learn Mandarin Chinese. I really like this language because of its intonation.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- hobby div -->

htmlcssbootstrap-4

Answer №1

To properly format your code, enclose it within a parent div element as shown below:

    <div style="display:flex">
      // Add your existing code here

   </div>

Answer №2

It appears that using style="display: inline-block" is effective in your current setup. However, I recommend verifying the margins and padding of your elements to ensure there is adequate space for them to be positioned side-by-side.

<div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Coding</h3>
                <p class="card-text">This is my primary hobby..</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <div style="width:100px;height:100px;background-color:gray"></div>
              <div class="card-body">
                <h3>Guitar</h3>
                <p class="card-text">I love music.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hobby" style="display: inline-block">
    <div class="album py-5 bg-light">

Answer №3

Provide the styling for a parent div.

<div class="parent-div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
    <div class="child-div>

    </div>
</div>

Consider either of the following options:

.parent-div {
    display: inline-block;
}
.child-div {
    width: 33%;
    height: 200 px;
}

Or:

.parent-div {
    display: flex;
    flex-wrap: wrap;
}

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

Struggling to align text input within a label element

I'm struggling with centering the text on Bootstrap radio buttons that I am customizing. I have tried adjusting the margin, align-content, vertical-align, and text-align properties but the text still won't vertically center. Any suggestions? Her ...

htmlcsstwitter-bootstrap

Creating Responsive Headers Using CSS for Mobile Devices

I'm looking to make my header font size of 60px more responsive for mobile devices so that the text doesn't get cut off. Any suggestions on how to achieve this? Thank you! Here's the code snippet: h1 { font-size: 4.286em; /* 60px */ margi ...

css

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

csssasszurb-foundationcompass-sass

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...

javascripthtmltwitter-bootstrap

Issue with html2canvas image download in Firefox

I am currently using HTML2Canvas to try and download a div as an image. It works perfectly fine on Google Chrome, but I am experiencing issues with Firefox. Below is the code snippet: <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0. ...

javascripthtmlcanvas

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...

javascripthtmlcssbackground-image

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

Struggling with proper vertical alignment using Flexbox and achieving center alignment

I've been using JavaScript for displaying dynamic text and images, but I'm facing some formatting issues. Currently, I'm utilizing display: flex to position the text and image next to each other, but I'm struggling with horizontal alig ...

htmljquerycss

Transition effects on table images using CSS

How can I incorporate CSS transitions into my holiday list? When hovering over an image, I want it to display a larger size and then return to normal when the mouse is moved off. I understand how to do this with JavaScript, but I prefer to achieve this e ...

htmlcsscss-transitions

What is the best way to display data in the User Interface when data is being received through the console in AngularJS?

I have created an HTML file and the corresponding controller logic for this page. I can see the data in the console, but it's not displaying on my UI. <div id="panelDemo14" class="panel panel-default" ng-controller="NoticeController"> < ...

javascripthtmlangularjs

What is the best way to extract specific content from HTML and display it within a specific HTML tag using

#!/usr/bin/env python import requests, bs4 res = requests.get('https://betaunityapi.webrootcloudav.com/Docs/APIDoc/APIReference') web_page = bs4.BeautifulSoup(res.text, "lxml") for d in web_page.findAll("div",{"class":"actionCol ...

pythonhtmlparsing

Troubles with concealing dropdown menu when hovering

I have noticed that this issue has been raised before, but none of the solutions provided seem to fix my problem specifically. The submenu in my menu is not functioning as intended. It should be displayed when hovered over and hidden when not being hovere ...

javascripthtmlcss

How can I make a sticky element appear behind a different element?

https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...

csssticky

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

Guide on transforming a Java multiclass applet into an HTML file

Can someone help me with converting three Java classes saved as .java into an applet in HTML? I've been advised to convert it to a .jar file, but I'm not sure how to do that. Can anyone provide a step-by-step guide, preferably using NetBeans? ...

javahtmlobjectjarapplet

Issue with VideoJS functionality on iPad

When attempting to incorporate an html5 <video> tag into my Salesforce web page, I stumbled upon a fantastic library called "Videojs" (). It fulfilled most of my requirements, but I encountered a problem when trying to play a video on an iPad. This l ...

ioshtmlipadsalesforcevideo.js

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

htmlcssangularjs

Is there a way to reverse the animation playback in Angular?

I am working on an animation that involves a box fading from its original color to yellow. However, I would like to achieve the opposite effect: when the page loads, I want the box to start off as yellow and then fade back to its original color. The challe ...

javascriptcssangularanimation

What could be causing issues with angularjs ng-include not functioning properly in Chrome at times?

<html ng-app="myApp1"> <head> <title>NG-Include</title> <script src="angular.js"></script> <script src="filter.js"></script> </head> <body> <div ng-controller="myController"> ...

htmlangularjsgoogle-chrome