Create a basic grid layout using Bootstrap

I'm struggling to create this straightforward grid layout using Bootstrap:

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

Essentially, I attempted the following method based on Bootstrap documentation:

<td>
<div class="row">

<div class="col">Male, Arabic, TV advertisement</div>
<div class="col">Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description</div>

<div class="w-1"></div>

<div class="col">Male, Arabic, TV advertisement</div>
<div class="col">Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description</div>

<div class="w-1"></div>
</div>
</td>

Unfortunately, it ends up looking like this instead:

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

htmlcssbootstrap-4

Answer №1

It's highly recommended to refer to the official documentation for these types of queries. However, here is a brief overview to help you grasp the basics of how the bootstrap grid system functions.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88d9689968b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
    <div class="col-5">
      <input type="text"/>
    </div>
    <div class="col-5">
      <input type="text"/>
    </div>
    <div class="col-2">
      <button>search</button>
    </div>
  </div>
  
  <div class="row">
    <div class="col-sm">
      <h3>Samples</h3>
    </div>
  </div>
  
  <div class="row">
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
    <div class="col-2">
      <button>more</button>
    </div>
  </div>
  
  <div class="row">
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
  </div>
  
   <div class="row">
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
  </div>
  
   <div class="row">
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
    <div class="col-5">
      <Component>Your Component Here</Component>
    </div>
  </div>

Answer №2

Here's a suggestion for you: instead of using w-1, try using w-100.

<div class="w-100"></div>


<html>

<head>
  <meta charset="UTF-8" />
  <script src="script.js"></script>
</head>

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

  <td>
    <div class="row">
      <div class="col">Male, Arabic, TV advertisement</div>
      <div class="col">
        Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description
      </div>

      <div class="w-100"></div>

      <div class="col">Male, Arabic, TV advertisement</div>
      <div class="col">
        Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description
      </div>

      <div class="w-100"></div>

      <div class="col">Male, Arabic, TV advertisement</div>
      <div class="col">
        Male, Arabic, TV advertisement, Audio book children, Audio book adults announcements, TV audio description
      </div>

    </div>
  </td>
</body>

</html>

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

Create HTML content from a file retrieved from the server

I have been working on a dynamic website project, diving into web development from scratch despite having coding experience in general. As I navigate Angular CLI and Bootstrap, I've come across a fundamental question: Do modern websites house all thei ...

javascripthtmlangular

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

When animating text using CSS keyframes, I use animation-fill-mode: forwards to maintain the final look of the animation. For example: #my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mod ...

javascriptjquerycss

Utilize the class names to assign a distinctive color using mixins in SCSS

I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...

htmlsassscss-mixins

CSS Dropping Down Menu Design

Hello everyone! I am taking my first step into web development and currently in the process of revamping my DJ website. Check out my updated site here: I am working on creating a dropdown div within the top-left menu that will display information about t ...

cssdrop-down-menu

Steps for rearranging the order of CSS grid layout

Could you assist me in implementing a grid layout that fulfills these specific criteria? I'm unsure of how to proceed, so any guidance would be greatly appreciated. https://i.sstatic.net/vBtXc.png When there are more than 9 items, the current layout ...

javascripthtmlcssvue.js

Sleek CSS Slider with Image Transformation on HoverThe requested task has been

I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...

csscss-transitions

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

I'm having trouble getting CSS to apply to my HTML file. Any idea why?

I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on eleme ...

htmlcss

Creating generic types for a function that builds <options>

I have encountered a situation in my application where I need to loop through an array to construct a list of <option> tags. To streamline this process, I am attempting to create a universal function. function optionValues<T, K extends keyof T> ...

htmltypescriptjsx

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

javascriptjqueryhtmlcssradio-button

Notes should be added to the Flutter page when it is executed on the emulator

I am working with 2 widgets in my project: ProjectPage and ProjectPageWeb, both of which have similar functionalities in displaying an iframe. The difference lies in the fact that they use different components to achieve this. ProjectPage utilizes the Web ...

htmlflutterdartiframewebview

Passing a PHP variable through a URL using the GET method

I need to pass a value using the get method. The code snippet is as follows: <td><a href="cart-remove.php?id={$row['id']}" class="remove_item_link"> Remove</a></td> The value I want to send is stored in $row['id&a ...

phphtmlgetgetmethod

Display a specific message in a div when the input field is left empty

My goal is to create a div that mirrors the content of an input field. When I type "lalala" in the input, it should show up in the div, and this part is working fine. However, I also want the div to display "The input is empty" when the input itself is emp ...

javascriptjqueryhtml

How to enlarge the size of specific letters in HTML

I am looking to enhance the values of C and I. In addition, I am utilizing ::first-text{}. This is currently functioning well. Now, the question arises - how can I elevate the value of I. <p>Creating and Implementing</p> <center> < ...

html

What could be causing the paragraph margins to overlap and not display properly?

Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...

htmlcss

The webpage is drifting sideways to the right without any content being displayed

Recently, I launched a new website and encountered an issue with a static page I designed. While it may not be a critical problem, it is certainly bothering me! If you want to check out the website in question, visit: In essence, I have used CSS to hide ...

htmlscrollbarhorizontal-scrolling

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Is there a way to achieve text wrapping like this using semantic and clean HTML and CSS that is compatible with all browsers? The only solution I can think of is adding different classes to the <p> element. However, the drawback of this approach is ...

jquerycssxhtml

CSS font attribute stylus variable

Can you help me troubleshoot this issue with the variable in stylus that is setting the font attribute using shorthand syntax? button-font = 100 16px Helvetica Neue', Helvetica, Arial, sans-serif I'm encountering the following error message: ...

cssstylus

empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue wil ...

htmlcsswhitespace

Adjust the dimensions of an SVG element using CSS within an li element's ::before pseudo-element

I'm working on a list where SVGs are loaded as list items. How can I adjust the height and width of the ::before pseudo-element to be 30px x 30px? Setting the height and width directly didn't work for me. Can someone assist with this? <div cl ...

htmlcss