Adaptive grids in Bootstrap

I've been using bootstrap and I'm trying to get the items to align next to each other, but using the bootstrap columns doesn't seem to be working for me. I may be coding it incorrectly.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9adb7afb7a9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <h6>
        We have funded 120,000 charity projects for 20M people globally.
      </h6>

      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million people lack access to clean water. Your help enables us to provide clean water for improved health.
      </p>

      <h6>Healthy Food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        Your support allows us to provide nutritious food to those in need.
      </p>

      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>Donations have helped us build schools, providing children with access to quality education.</p>
    </div>
  </div>
</div>

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

The image above shows how I want the design to appear.

Please assist me with this issue, as it's becoming quite frustrating.

htmlcsswebbootstrap-4

Answer №1

To ensure proper formatting, make sure to include the col class within each div column

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <h6>
        Over 120,000 charity projects have been funded, benefiting 20 million people worldwide.
      </h6>
    </div>

    <div class="col">
      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million people lack access to clean water. Your support allows us to provide this basic necessity, leading to improved health.
      </p>
    </div>
    <div class="col">
      <h6>Healthy food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        Through your generosity, we have supplied nutritious food to those in need.
      </p>
    </div>
    <div class="col">
      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>Donations have supported the establishment of schools, ensuring children have access to quality education</p>
    </div>
  </div>
</div>

Answer №2

I believe this is what you are searching for.
Elements will be displayed in a vertical alignment when the browser width is less than 767px.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1P" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="container">
  <h6>
    We have supported 120,000 charity initiatives benefiting 20 million people worldwide.
  </h6>
  <div class="row mt-5">
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>
        Clean Water
      </h6>
      <i class="fas fa-tint"></i>
      <p>
        633 million individuals lack access to clean water. Your contributions enable us to provide clean water, improving health outcomes.
      </p>
    </div>
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>Healthy food</h6>
      <i class="fas fa-seedling"></i>
      <p>
        Through your support, we have delivered nutritious meals to those in need.
      </p>
    </div>
    <div class="col-12 col-md-4 mb-2 mb-md-0">
      <h6>
        Education
      </h6>
      <i class="fas fa-book"></i>
      <p>Donations have helped establish schools, providing children with quality education opportunities.</p>
    </div>
  </div>
</div>

Answer №3

When considering this layout, imagine a single row consisting of four columns. As others have mentioned, make sure to assign the class col-3 to each Div.

Bootstrap is structured with 12 columns per page, so each column should occupy 3 of those columns, hence the col-3 designation. If you only wanted 2 columns, it would be col-6, and so forth.

To have columns placed side by side, wrap each one in the following code:

<div class ="col-3"> 

<div>

The characters between COL and the number specify the screen size for scaling. Omitting them will result in the column working across all devices.

Answer №4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf5edf3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <i class="fas fa-3x fa-code"></i>
      <div>
        <h5 class="py-2">Clean Code</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <div>
        <i class="fas fa-3x fa-cogs"></i>
        <h5 class="py-2">Problem Solving</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <i class="fas fa-3x fa-globe"></i>
      <div>
        <h5 class="py-2">Best Domain</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="col-md-3">
      <i class="fas fa-3x fa-user-shield"></i>
      <div>
        <h5 class="py-2">Secure Website</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
</div>

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

The CSS method to conceal the initial list item is proving ineffective

I'm having an issue with my WordPress theme where I want to hide only the first li element but it's hiding all of them. Here is the HTML code I'm using: <div class="nav"> <ul class="nav-tabs nav-justified"> <li class="activ ...

csswordpresscss-selectors

Styling CSS for circular buttons

I am a newcomer and feeling quite puzzled. When using a div tag with the same width and height along with border-radius: 50%, it always transforms into a circle. However, when attempting to create a circular button using the 'a' tag, it doesn&apo ...

cssbuttongeometry

div that adjusts its max-width to always perfectly match the width of its contents

Check out this jsfiddle for more information: http://jsfiddle.net/tN6QE/2/ The CSS code we are using is as follows: div { display: inline-block; border: solid 1px black; padding: 10px; max-width: 200px; } We are dealing with two scenarios here. ...

htmlcss

How to interact with a C# List using JavaScript

Our internship project entails creating a business application using Unity WebGL. However, we're facing a challenge when it comes to retrieving a list from C# to populate a Select element on our webpage. We've successfully communicated and retrie ...

javascriptc#htmlunity-webgl

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

Ways to perform a CSS redirection

How can you create a webpage where only the CSS can be altered to show a completely different page to the user? ...

htmlcss

Make a big picture fit into a tiny container

I have a question about image rendering. What occurs when we try to fit a large image into a small container? Consider, for example, creating an HTML page with a 100x100 px image on a device with a pixel ratio of 2. Situation 1: Placing the image inside a ...

htmlcsspixeldevicepixelratio

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

I am working on a page with several input boxes that need to be flagged for certain criteria. <div class="form-group"> <label class="d-block">Allowance Type</label> <div class="input-group"> ...

csstwitter-bootstrapangular

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

Paged Content: Turning a Lengthy Text into a Book-Like Format

I have a unique idea for displaying text like a flipping book on a web page. Users can use arrow keys to navigate through the content, giving it an interactive and engaging feel. Instead of focusing solely on page transitions, I am looking into implementi ...

phpjqueryhtmlcsspagination

Using Python's Beautiful Soup library to retrieve text from h1 and id tags

I've been attempting to retrieve the text from an HTML id called "itemSummaryPrice," but I'm having trouble figuring it out. html = "" <div id="itemSummaryContainer" class="content"> <div id=&quo ...

pythonhtmlbeautifulsoup

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

javascripthtmlnode.jsangulardom

What is the best method for selecting an Iframe in Firefox using HTML?

As a student working on building a website, I recently added some iframes to a WordPress page and noticed that all links were opening in new tabs specifically in Firefox. The HTML code in question: <a href="http://example" target="exampl ...

htmlfirefoxiframe

Uploading images in PHP

I need assistance with uploading an image to a server using PHP, saving it inside a directory, and then retrieving the image URL. Here is my HTML code: <form method="post> <fieldset> <div class="form-group col-md-6 col-lg-6 col-sm-1 ...

phphtmlimage

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

A variety of negative () DOM Selectors

I've been trying to select a specific node using two not clauses, but so far I haven't had any luck. What I'm attempting to achieve is selecting an element whose div contains the string 0008, but it's not 10008 and also does not contain ...

javascriptjquerycssdomselector

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

javascripthtmlcss

Issue with website header disappearing

I'm currently struggling with an issue - I can't seem to pinpoint the problem. The header of a website template is functioning perfectly in 1280*800 resolution, but it's breaking on larger monitors (1900*1440). The header consists of three d ...

htmlcssheader

What is the process for excluding or removing an input once the PHP code has been run?

I am working on a project with a post input field where I submit simple data. <form method="post" action="result.php"> <input type="url" name="url" class="form-control" placeholder="http://example.com/"> <input type="submit" name="s ...

phphtmlformsincluderequire