Position the list-group to the right using a float

I am new to Bootstrap and I'm facing a challenge with arranging my list items. I have 15 items in total, and I want the last 7 items to be aligned on the right side (see the image for reference). Despite trying out various tutorials, I haven't been able to achieve the desired layout. Can you provide me with some guidance or a different approach to tackle this issue?

Even though this might seem like a basic question for beginners, I would greatly appreciate your assistance.

I envision the layout to look like this:

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

https://i.sstatic.net/5c7CF.png

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">The Simple and Secure Way</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
     <!-- List items go here -->
    </ul>
  </div>
</section>
csshtmlbootstrap-4

Answer №1

CSS-Grid is the perfect solution for this.

To achieve this, we simply create 2 columns and specify the number of rows to be "8" (in this case, since 15 - 7 = 8).

.list-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, 1fr);
    grid-auto-flow:column;
}
<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">The simple and secure way</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
    </ul>
  </div>
</section>

Another option:

If the total number of li elements is unknown and you want the last 7 items in the second column, you can achieve this using :nth-last-child(-n+7)

.list-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
}

li {
  grid-column: 1;
}

li:nth-last-child(-n+7) {
  grid-column: 2;
}
<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">The simple and secure way</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
      <li>Item 17</li>
      <li>Item 18</li>
      <li>Item 19</li>
      <li>Item 20</li>
    </ul>
  </div>
</section>

Answer №2

Not sure if this meets your requirements, feel free to take a look.

.list-group{
display: block !important;
min-width: calc((1000px / 7) * 7);
overflow:auto;
}

li:nth-last-child(-n+7) {
    display: block;
    overflow: hidden;
    float: left;
    width: calc(100% / 7);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">The simple and secure way</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <!-- more list items here -->
    </ul>
  </div>
</section>

Answer №3

.list-group {
  display:grid !important;
  grid-template-columns:repeat(2,1fr);
}

li:nth-child(1) {
grid-column:1/3 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">The Easy and Secure Way</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      ... (repeated list items for brevity)
    </ul>
  </div>
</section>

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

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid

Adjust the horizontal position of a span element from left to right based on its class

Welcome to my first question here, with many more to come in the future. I have an issue with positioning that I'm not sure is possible to solve. The problem arises with an unordered list (<ul>) containing floated <li> elements. For the m ...

phphtmlcsscss-position

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

javascripthtmlcssbutton

Clickable regions in Internet Explorer 7 that lack a specific width

Is there a way to make the clickable area of links always stretch to the parents container when the parent container does not have a fixed width? For example, check out this JSFiddle. In Firefox, the link stretches with the text and the li tag, but in IE ...

htmlcssinternet-explorer-7

The secrets of z-index: Ensuring nested elements stay behind their parent element

Check out this demo to see the problem: http://jsfiddle.net/5sqxQ/2/ I am trying to make the sub menu appear below the main menu. I also want to use JavaScript to slide the menu from underneath when hovering over the parent li element. I don't real ...

cssnestedz-index

Trouble with "data-bs-dismiss" functionality in Bootstrap 5

I am faced with an issue involving two modals. My goal is to have the "Novo Avatar" button close the modal with the ID #modal_debug and then open the modal #modal_newAvatar. However, instead of closing the current modal, it simply opens the new one on top. ...

htmlbootstrap-5

Designs created using ASCII characters in HTML that are not under my control

Hey there! I've been attempting to incorporate some ASCII art onto a website that I don't have control over. When I input text into their editor, it is then enveloped in <p> tags which makes adding ASCII art quite challenging. Firstly, I ca ...

htmlascii-art

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table

JavaScript Code for Executing Function on Checkbox Checked/Unchecked

My goal is to display an image when the checkbox is checked and show text when it is unchecked. However, I am facing an issue where the text does not appear when I uncheck the checkbox. <input type="checkbox" id="checkword" onchang ...

javascripthtml

The scaling feature in CSS does not function properly in Internet Explorer 8

I've tried multiple approaches to transform the IE Matrix, but I'm facing an issue with the transform scale CSS not functioning in IE8. Code: .fture_box ul li.fture_img img{ width: 451px; height: 284px; display: block; margin: 0 0px 0 11px; pad ...

htmlcssinternet-explorerinternet-explorer-8

How can EJS variables be utilized within HTML input fields?

I am facing an issue while trying to use a checkbox to redirect selected users to a new page. I am looking for a solution on how this can be achieved, especially when using mongodb to store the information. Below is my current code snippet: Firstly, I ren ...

htmlnode.jsexpress

Differentiating between Chrome and Safari user-agent strings using CSS only (without JavaScript)

Are there specific CSS selectors that can target Safari and Chrome exclusively? When attempting to target only Safari, I initially tried the following selector, but it seems to also target Chrome: html[data-useragent*="Safari"] { [...] } ...

htmlcssgoogle-chromesafari

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...

htmlcsstwitter-bootstrap

JQuery validation and qTip2 - Remains visible even after successful validation

Struggling with getting both libraries to work together has been a challenge for me, but I'm almost there now! Initially, I attempted the suggested method: Create the form Set validation rules using escaped name attributes, as RoR automatically set ...

jqueryhtmlvalidationruby-on-rails-4qtip2

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

javascripthtmljquerycssbootstrap-5

Troubleshooting: Bootstrap update functionality is only functional in Debug configuration in Visual Studio

I recently made the switch from Bootstrap 2 to Bootstrap 4, updating the syntax, grids, and other elements. While everything was working fine in debug mode, I encountered an issue when trying to release the website. Even though there were no errors during ...

asp.netasp.net-mvctwitter-bootstrapmodel-view-controllerbootstrap-4

Is there a recommended online tool for converting the files I need assistance with?

I've recently inherited a new website, but when I look at the source code, it appears to be unescaped in JavaScript like so: %3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A Unfortunately, I'm not familiar with what the %XX characters repre ...

htmlconverters

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

javascripthtmljquerycss

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

javascriptjqueryhtmljsonajax

Tips for creating a Carousel with more than three images using Bootstrap

Recently, I attempted to enhance my Carousel in Bootstrap by adding more images. Initially, I inserted the code snippet below within the ordered list with the class "carousel-indicators." <li data-target="#carouselExampleCaptions" data-slide-to=" ...

javascriptcssbootstrap-4carousel