Issue with Bootstrap grid borders

I am currently working on a grid system that displays flight information in 10 columns, with a select button and price in 2 columns. I am facing an issue where adding a border to separate the select button section from the rest of the flight information only draws a line halfway. I suspect this may be due to my row/column structure. How can I fix this problem?

Any help would be greatly appreciated!

Outcome:

CSS:

.selectButtonColumn{
    border-left: 1px solid;
}

HTML:

    <div class="container well well-md searchResult">

        <ul class="list-group">
            <li class="list-group-item">
                <div class="row">
                    <div class="col-md-10">
                        <div class="departFlyRow">
                            <div class="col-md-2 col-md-offset-2">
                                <div><b>06:20</b></div>
                                <div>LHR</div>
                            </div>

                            <div class="col-md-2">
                                <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                            </div>

                            <div class="col-md-2">
                                <div>5h 30</div>
                                <div>direct</div>
                            </div>

                            <div class="col-md-2">
                                <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                            </div>

                            <div class="col-md-2">
                                <div><b>12:50</b></div>
                                <div>SVO</div>
                            </div>
                        </div>
                        <div class="clearfix returnFlyRow">
                            <hr>

                            <div class="col-md-2 col-md-offset-2">
                                <div><b>06:20</b></div>
                                <div>SVO</div>
                            </div>

                            <div class="col-md-2">
                                <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                            </div>

                            <div class="col-md-2">
                                <div>5h 30</div>
                                <div>direct</div>
                            </div>

                            <div class="col-md-2">
                                <i class="btn btn-default"><i class="glyphicon glyphicon-plane gly-rotate-90"></i> </i>
                            </div>

                            <div class="col-md-2">
                                <div><b>12:50</b></div>
                                <div>LHR</div>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-2 selectButtonColumn">

                        <div><b>&pound;100</b></div>
                        <button type="button" class="btn btn-success">Select</button>

                    </div>
                </div>
            </li>
        </ul>

    </div>

Answer №1

My approach would be to consider dividing the content into separate rows every 12 columns, however, it may not be necessary to do so in order to accomplish your goal. One alternative could be applying a right border to the "returnFlyRow" class.

.returnFlyRow{
    border-right: 1px solid;
}

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

Is there a way to adjust the transparency of an image without affecting any overlaid text while using Bootstrap's carousel feature?

I am currently working with Bootstrap v4 to build a carousel featuring an image with caption text. My goal is to have the image faded while leaving the text unaffected. Despite trying several non-Bootstrap solutions, I have been unsuccessful in achieving t ...

CSS tip: Display only the latest x entries on a list

Can CSS be used to display only the most recent x items in a list? The code below reveals every item except the first two. How can I make it so that only the last two items are displayed in the list? ul li { display: none !important; } ul li:nth-las ...

Concealing overflow for text content through CSS styling

I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...

Troubleshooting problem with spacing on three horizontal divs

I am currently working on building an E-commerce website to gain some practice. Here is how the div is set up: .small-container { max-width: 1080px; margin: 5px; padding-left: 25px; padding-right: 25px; } .col-4 { flex-basis: 25%; padding ...

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

What is the best way to bring a background image to the forefront?

I am currently working on creating a list of "fake videos" which are essentially images with a play icon on them. My plan is to use the play icon as a background and bring it to the front of the image by adjusting the z-index. However, no matter what I try ...

I am encountering an issue where my input is moving to the following line after the initial one. What could be

Trying to create a layout I like for this form has been a bit of a struggle. I thought I had something good at first, but after the first row of input, the formatting gets all messed up and I can't figure out what's going wrong. <!DOCTYPE htm ...

iOS users are experiencing issues with mobile responsiveness

I've encountered a strange issue with the mobile responsive design of a website. The website in question is While everything displays correctly on desktop using dev tools > responsive, and on any Android device, the problem arises when viewing i ...

Resize Pictures in Carousel for Smartphones

Currently, I am in the process of optimizing my website for mobile devices. The NivoSlider, which is used throughout the site, does not seem to scale well on smaller screens. Despite trying various methods in the mobile section of my stylesheet such as " ...

Only apply the CSS rule to all pages except for one

I'm a beginner when it comes to css. In my wordpress website editor (Onetone theme), I added the following rule to my 'custom css field': html, body {margin: 0; height: 100%; overflow: hidden} It's working well...the scrollbar is gone ...

Personalized scrollbar extends beyond the screen

I have been working on creating my own scroll bar, and for the most part, it's functioning well. However, there is one small issue that I'm facing. Whenever I reach the bottom of the page, the handle of the scroll bar disappears underneath the v ...

Tips on how to align bullet points in a list

I'm currently working on a little exercise that requires me to replicate this However, I'm facing some difficulty aligning the bullets as shown in the reference. My content is aligned but not the bullets. Here's the link This is my HTML: ...

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

A static iframe or an alternative solution that is not interactive

I specialize in creating websites for my clients. When they log in, they are presented with 5 different design ideas for their site - each showcasing a unique layout and color scheme. Currently, I manually upload 5 screenshots of the designs created by me ...

Create unique list markers by utilizing the "::marker" and "content" properties

When attempting to create a list with custom list markers, I encountered an issue. An example from MDN is provided: li::marker { content: '✝ '; font-size: 1.2em; } <p>Group known as Mercury Seven:</p> <ul> <li& ...

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

Adjust the ARIA value of a Bootstrap progress bar within a VueJS component on the fly

During the development of my website using VueJS and Bootstrap, I made the decision to utilize Vanilla Bootstrap instead of a specific VueJS framework like VueBootstrap or VueStrap. Currently, I am facing an issue while building a custom component that wr ...

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...