Struggling to line up text boxes with CSS borders within div elements in a neat row

Here is the HTML snippet with a div containing four sub divs with a class named 'city' that I'm trying to align in one row using Bootstrap.

I have included my stylesheet below the HTML, and despite spending over an hour adjusting margins, I still can't get it right.

<!DOCTYPE html>
<html lang="en-us">
<head>
  <link rel="stylesheet" type="text/css" href="./index.css">
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1 id="cities">Cities Of The World</h1>
  <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
  </div>

  <div class="city">
    <h2>New York</h2>
    <p>The City of New York is the most populous city in the United States.</p>
    <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
  </div>
</div>
</body>
</html>

#cities {
    text-align: center;
    padding: 20px;
}
.city {
    display: inline-block;
    margin: 10px;
    padding: 15px;
    max-width: 250px;
    height: 300px;
    border: 1px solid black;
}

Answer №1

Implementing CSS Flexbox:

To create a flexible layout, wrap your .city elements into a parent container, for example, .city-holder, and set it as a flex container. Here's an example:

.city-holder {
  display: flex;
}

Check out the code snippet below for reference:

.city-holder {
  display: flex;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
  <link rel="stylesheet" type="text/css" href="./index.css">
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1 id="cities">Cities Of The World</h1>
  <div class="city-holder">
  <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
  </div>

  <div class="city">
    <h2>New York</h2>
    <p>The City of New York is the most populous city in the United States.</p>
    <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
  </div>
  </div>
</div>
</body>
</html>

Alternatively, Utilize Bootstrap Grid System:

By employing col-xs-* classes, you can create a responsive grid layout. Refer to the snippet below:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <link rel="stylesheet" type="text/css" href="./index.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <h1 id="cities">Cities Of The World</h1>
  <div class="row">
  <div class="col-sm-3 city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="col-sm-3 city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
  </div>

  <div class="col-sm-3 city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
  </div>

  <div class="col-sm-3 city">
    <h2>New York</h2>
    <p>The City of New York is the most populous city in the United States.</p>
    <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
  </div>
    </div>
</div>
</body>
</html>

We hope this guidance proves helpful!

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

How can I use XPath to choose tags that are located close to (both before and after) a

Is it feasible to use XPath to select all br tags that come before and after an h3 element? This XPath expression only captures the first br tag: //h3/following-sibling::*[1][name()='br'] I am looking for a way to target the 2 br tags preceding ...

Determining the Missing Focus: Discovering the Vacant '":focus'" in Jquery

I am currently working on jQuery and facing an issue with input fields that have assigned ID's and attached .blur() events. I am struggling to identify the specific item that has gained focus: $("#"+field).blur(function() { console.log ($(this).attr ...

Repositioning a jQuery function from inside a plugin

I need assistance with customizing the functionality of a jQuery plugin called AjaxFileUpload. You can find the plugin here: https://github.com/davgothic/AjaxFileUpload The current behavior of the plugin is that it uploads the file as soon as it is select ...

Horizontal image scrolling problem across different browsers

Check out my Fiddle. I'm having trouble with scrolling on different browsers. In Chrome, the scroll behaves as expected and stops when the content ends. However, in Firefox, it keeps scrolling even after reaching the end despite setting a fixed width ...

Encountered an error while attempting to load resource in Node.js

I'm currently working on a project utilizing Node js (Express...). Let me do my best to explain the issue I am encountering. My work is being done on localhost, and the main page of my index.html has buttons that lead to other pages when clicked. I c ...

Expand the clickable area of the checkbox

Is it possible to make clicking on an empty space inside a table column (td) with checkboxes in it check or uncheck the checkbox? I am limited to using only that specific td, and cannot set event handlers to the surrounding tr or other tds. The functional ...

Converting a key-value pair string into an array in PHP: A comprehensive guide

When the checkbox is selected, I will extract the values listed below: attribute_value:samsung, attribute_id:1, spec_group_id:2, prod_id:1 To convert the above string into an array format and obtain a single array outside of the loop. Therefore, if I wa ...

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

Is it possible to have the logo centered with the menu bar?

I found a cool theme: Check it out here! Does anyone know how to center the logo and menubar on this template? <section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30"> <div class="container"> ...

Tips for personalizing the appearance of a button sourced from a library

Currently, I am utilizing a button from a library called https://www.npmjs.com/package/@react-oauth/google. Although this library offers a custom button feature, I have noticed that it produces a different response. My goal is to adjust the max-width and ...

Achieve full height without scrolling in React

I am facing an issue where the height:100% property is not working to fill the remaining area on the screen. A red outlined area represents the border radius, while the highlighted yellow space should have been filled: https://i.stack.imgur.com/ZQNkw.png ...

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

Creating a Basic Slideshow using Javascript

I've been attempting to create a slideshow using only JavaScript, but I've run into an issue. When I set the divs to change on click, it works perfectly fine. However, when I try to set it to change at specific intervals, it doesn't work. ...

Issue with ngRepeat directive

I'm attempting to display an array in a table Below is the relevant code snippet js: var d = [[ '12:00', 'X-Files', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nisi in velit tristique scelerisque. ...

Having trouble displaying images on iPhone 6

I am facing an issue with the background image of one of my elements. The image loads perfectly on most devices such as iPhone 5, iPhone 5c, and Samsung Galaxy, but it does not load on iPhone 6, iPhone 6 Plus, and some iPads. Can anyone provide insights ...

Show the user's username after they have successfully signed in

Hello, I am trying to display the username after a user logs in. Here is the code for the page where I would like to show it: index.php <?php require_once 'classes/Membership.php'; $membership = New Membership(); $membership->confirm_Me ...

Struggling to create a dynamic design for a nested column using bootstrap

After creating a layout in Figma, I have set up a grid structure as follows: <div class="container-fluid"> <div class="row" id="sobre-nos-wrapper"> <div class="col"> <div class="row"> <div class="col ...

Do you think my plan to develop an HTML parser from the ground up will be successful?

My goal is to enhance my skills by building an HTML parser. The basic idea I have in mind includes: Defining the tokenization using regex. Taking a string of HTML as input. Iterating through the HTML string. Storing details about each token, such as cont ...

Analyzing JSON information and presenting findings within a table

Requesting user input to generate a JSON object based on their response. Interested in showcasing specific details from the object in a table format for user viewing. Questioning the efficiency and clarity of current approach. My current progress: In HTM ...