What is the best way to separate two <a> tags using only Bootstrap?

Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page.

My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is there a way to accomplish this using bootstrap alone?

I have included the HTML code snippet below as a reference:

<?php
for ($i = 0; $i < 10; $i++) { ?>
  <span><?php echo $i + 1; ?>. </span><a class href="#">Lorem ipsum dolor sit</a><br />
<?php } ?>

Your assistance is greatly appreciated!

Desired result:

  1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  8. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  9. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

  10. Lorem ipsum dolor sit amet consectetur adipisicing elit. Et debitis magnam sint laboriosam mollitia qui

htmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

Should we put this in divs?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div><span>1. </span><a href="#">Lorem ipsum dolor sit</a></div>
<div><span>2. </span><a href="#">Lorem ipsum dolor sit</a></div>

Answer №2

Consider using an ordered list for a better structure:

<ol>
<?php for ( $i = 0; $i < 10; $i++ ): ?>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
<?php endfor; ?>
</ol>

Answer №3

To ensure each <a> tag starts on a new line, you can apply the d-block class.

<?php for ($i = 0; $i < 10; $i++): ?>
    <div><span><?php echo $i + 1; ?>. </span>
    <a  href="#">Lorem ipsum dolor sit</a></div>
    <br />
<?php endfor; ?>

Learn more about this here.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<span>1. </span><a href="#">Lorem ipsum dolor sit</a><br />
<span>2. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>3. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>4. </span><a  href="#">Lorem ipsum dolor sit</a><br />
<span>5. </span><a  href="#">Lorem ipsum dolor sit</a><br />

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

Unresolved styles in React component linked to styles.css file

As I dive into creating a registration page in ReactJS, I encounter a frustrating issue with my styles not applying correctly from the styles.css file. Let's take a look at my RegisterPage.jsx component: export default function RegisterPage() { ret ...

javascripthtmlcssreactjs

Executing numerous xhttp.send requests within a single webpage

Hey there, I'm facing an issue with xhttp.send(); as it keeps giving me the error message net::ERR_EMPTY_RESPONSE Here is a snippet of my code. Whenever a user clicks too quickly, they get kicked off the page. Is there a way to prevent this? docum ...

javascriptphphtmlajax

Is it possible to create a form inside a tooltip?

Looking to incorporate a jQuery feature into a form where a simple yes or no question appears upon hovering over it. However, encountering issues getting jQuery to recognize the dynamically created tooltip and submit alert function not working ("$('#w ...

javascriptjqueryhtmljquery-ui

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

pythonhtmldjango

Achieving uniform height for child images within adaptable Bootstrap 4 columns. What's the secret?

I am looking to create 3 columns using Bootstrap 4 that will adjust their width dynamically while keeping the padding consistent. I also want to ensure that the height of each image in all three columns remains the same regardless of changes in page width. ...

flexboxbootstrap-4

What is the best way to extract text from a dynamically changing element using jQuery?

I've been struggling with a coding issue. Despite trying numerous approaches, I keep encountering the same problem where every new button I add ends up having the same text or, alternatively, nothing seems to work as expected. $j serves as my variabl ...

javascripthtmljquerynext.js

What is the best way to extract the numerical value from a JavaScript object?

I'm currently working on a web form for a currency exchange demonstration. I have included a snippet of HTML and Javascript code that I have initially implemented. <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

javascripthtmlcssarraysobject

Send folder to the homepage of the website

I want to implement a redirect using .htaccess to prevent people from snooping into my directories and index files. For instance, if someone tries to access a specific image file like site.com/pics/1.jpg by trying to see the entire "pics" folder at site.co ...

phphtml.htaccesshttp-redirect

Step-by-step guide on embedding a function in HTML using vbscript

I'm working on a dynamic HTML list that I want to enable or disable based on user input. Typically, you can just use the "enabled" or "disabled" attribute at the end of the select element to control the entire list. However, I'm unsure how to ach ...

htmlvbscript

Having trouble viewing the initial value in an AngularJS2 inputText field

I'm having trouble displaying the initial value in inputText. I'm unsure of what mistake I'm making, but the value should be showing up as expected. Kind regards, Alper <input type="text" value="1" [(ngModel)]="Input.VSAT_input1" name= ...

htmlangulartypescript

The CSS code conceals the icon within the background

Could someone please help me out? I am new to this and can't seem to figure out what's wrong. The phone icon seems to be hidden behind a white background. Everything else looks fine, but I really want the icon to be in the front with a border and ...

css

Is there a way to submit a basic HTML form using R?

As a newcomer to R programming, I am excited to apply what I am learning in the Johns Hopkins Data Science track to practical use. My current goal is to automate the process of downloading historical bond prices from the US Treasury website After explorin ...

htmlrpostrcurlrvest

Adjust parent div size based on image size increase

I am currently facing a situation where I have a page displaying an image, but sometimes it appears too small. In order to make the image larger, I have utilized CSS Transform and it is working well. However, the issue lies in the fact that the parent DIV ...

javascripthtmlcss

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

Is there a way to update the image on a button after it has been clicked? I want it to switch to a different image when activated. var offButton = new sap.ui.commons.Button({ id : "offIcon", icon : "img/off.png" , press :functio ...

javascriptjqueryhtmlcanvassapui5

Using JQuery to eliminate the current div in an image slider

I currently have an image slider that allows users to switch between images. There are two buttons - one adds a new item to the slider, while the other is supposed to remove the current image from the slider, but it doesn't seem to be working properly ...

javascriptjqueryhtmlcss

Determining the size of an object in ASP.net as a percentage of the page, while taking into account the size of

I need help adjusting the size of a silverlight app on a page with multiple banners above it. My goal is to make the app's height always 100% of the screen height minus the banner's height to prevent any scroll bars from appearing. Does anyone kn ...

asp.nethtmlcss

Is it possible to activate a hover effect on an image within a button only when the button itself is being

I'm struggling to figure out how to activate the image hover effect when hovering over a button with an image inside, but not directly over the image itself. Here's what I have so far: <button type="button" class="btn btn-normal"><img s ...

htmlcssimagebutton

Printing the contents of a datatable in HTML can be achieved in VB.NET by including headers and setting paper orientation, fit to page, and grand total for print preview and direct print

I'm attempting to print the contents of a datatable in HTML for print preview and direct printing, including headers, setting paper size, orientation, and fitting to page in VB.NET. While it may be easy to accomplish this using an rdlc report, I am u ...

htmlvb.netprintingdatatablereporting

Tips for downsizing a large image to fit into a smaller area

I am working on a page layout that features a small circular navigation element. However, I am facing an issue with fitting a large picture within the boundaries of this small circle without it overflowing and causing alignment problems. Does anyone have ...

javascriptjqueryhtmlcss

Alter certain terms in HTML and update background using JavaScript

I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far: $(document).ready(function () { $('body').html(function(i, v) { return v.replace(/bad/g, &apos ...

javascriptjquerycsshtml