I'm having trouble getting my Bootstrap columns to line up properly on the same row

Has anyone encountered the issue of trying to dynamically render buttons but having them all appear in separate rows instead of three buttons per row?

 <div class="row">
<div class="container sports-container col-md-12">

    @foreach (var sport in Model.Aggregator.SportsRepository.List().Where(x => x.ParentSportId == null))
    {
        <div class="col-md-4">
            <a class="btn btn-outline-info">@sport.Description</a>
        </div>
    }


</div>

<style>
.sports-container {
    background-color: whitesmoke;
    margin-top: 20px;
}
</style>

Answer №1

According to the Bootstrap guidelines:

  • Containers play a crucial role in centering your website's contents. You can use .container for fixed width or .container-fluid for full width layouts.

  • Rows act as horizontal groupings of columns, ensuring proper alignment. By using negative margins on .row, you can guarantee that all content aligns neatly along the left side.

  • It is essential to place content within columns, with only columns being direct children of rows.

To summarize, make sure that the div class='row' is enclosed within the div class='container' in your code structure.

.sports-container {
  background-color: whitesmoke;
  margin-top: 20px;
}
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
  crossorigin="anonymous">

<div class="container sports-container col-md-12">
  <div class="row">
    <div class="col-md-4"><a class="btn btn-outline-info">Baseball</a></div>
    <div class="col-md-4"><a class="btn btn-outline-info">Hockey</a></div>
    <div class="col-md-4"><a class="btn btn-outline-info">Tennis</a></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

AJAX responses sans the use of jQuery

Similar Question: How can I achieve this through AJAX? After my previous attempt at asking this question, where I was not clear enough, I am making another effort to be as specific as possible. To start with, I have my data encoded using the json_enc ...

How is it possible for the web browser to display fonts like Open Sans even if they are not installed on my device?

Explaining how a browser is able to correctly display text with a specific Font-Family, it can be described as follows: The font-family property allows designers to create a prioritized list of fonts for the browser to use when displaying content. If the ...

An issue occurred with the DOMException while trying to execute the 'setAttribute' function on the 'Element': '{{' is an invalid attribute identifier

Currently, the code is under development and some methods are still empty while the *ngIf directives may not be correct in terms of logic. However, even with these issues, I encountered the same error without bothering to remove them at this stage. While ...

Crafting a website in HTML

Hello there! I am looking to create a flexible HTML and CSS page that adjusts in size when the user resizes the browser window. I want the page to be responsive to different resolutions. I've explored various solutions on this platform, but unfortunat ...

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

When I click on the dropdown menu, the box extends beyond the width of the page and a horizontal scroll appears. How can I make the dropdown box automatically adjust its position if it reaches the edge of the page without needing a scroll (as shown in the ...

The only functional button in the table is the one located on the top row

My MVC Application is encountering an issue with only the first item in the table working perfectly, while the rest are not calling the method. Despite my extensive research, I have been unable to resolve this issue. Below is the code on my view. Can someo ...

What is the method of generating an HTML tag solely using CSS?

Looking to style HTML tags without altering them in any way? Consider this example: <div id="Code_G" class="editor-group"> editor-group<br /> <div id="Code_L" class="editor-label "> editor-label </div> < ...

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

As a enthusiastic beginner, I'm facing a challenge that seems to have no easy solution. Can someone please assist me with this: How can I assign all the ids from a JSON database to the variable dotContainer, in order to hide all corresponding HTML id ...

Utilize CSS to position an element absolutely above the scrollbar

I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar... Here is my code: document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.ons ...

Website issues being displayed by Internet Explorer

Greetings! Let me begin by saying how wonderful this page is - I have already found many answers here before. Please forgive any errors in my English :) In my efforts to optimize my website for SEO and increase its speed, I made several changes. The site ...

Bootstrap Navigation Bar with No Possibilities for Expansion

I've been struggling to implement collapsible navbar functionality into my existing navbar which includes multiple dropdowns. Despite my efforts, the collapsible feature doesn't seem to work properly. I suspect that it could be due to the presenc ...

What is the process of sending data to a MongoDB database using node.JS?

Well, the code below is not exactly neat, but we're all learning, right? The goal here is to POST a basic user profile into a database, but it seems like I'm getting a 404 error. I'm relatively new to these technologies, so if anyone could ...

Is it possible to create a query selector that is able to find an element based on its attributes while also excluding elements with a specific class name?

Imagine you have elements that look like this: <div class="a b" data-one="1" data-two="2"></div> <div class="c" data-one="1" data-two="2"></div> <div class="b" data-one="1" data-two="2"></div> Is there a way to selec ...

Whenever I attempt to populate my modal box with data from my selection, I am greeted with an error message stating "invalid object passed in." What could be causing this issue?

Whenever I click on a customer from my table to display their details in a modal box, I keep getting an error message that says "invalid object passed in." The method client is responsible for populating the data and displaying it through a partial view. T ...

Is there a way to use the same color picker tool for adjusting both the background and text colors simultaneously?

My goal is to create functionality where the user can change the background color by clicking on the background of the div, and change text color by clicking on the text within the div. var box1 = document.querySelectorAll('.color1'); var pic ...

Using ReactJS and JavaScript to transform an array into a fresh array

I am working with an array that looks like this: var oldArray = [ {number: '12345', alphabet: 'abcde'}, {number: '54321', alphabet: 'abcde'}, {number: '67891', alphabet: 'abcde'}, ...

One way to trigger the same modal to open when clicking on a shared class using jQuery

I need some assistance with opening a model upon clicking the same link. Currently, when I click on the link, only the backdrop briefly appears and then the page reloads. Any help would be greatly appreciated. Thank you in advance. Below is the code snipp ...

My record template is functioning perfectly, as intended. Whenever I access the edit template, my immediate action is to generate a new record

In my saveremission method, the HTML form creates and loads data to the DB perfectly. def save_remision(request): if request.method == 'POST': fecharemi = request.POST['fecharemi'] fechaenvio = request.POST['fechaenvio&apo ...

Stopping multiple bindings in Knockout.jsIn Knockout.js, preventing multiple bindings

My view model is structured like this : function ImageViewModel() { var self = this; self.totalRecordCount = ko.observable(); self.currentRecordCount = ko.observable(); self.images = ko.observableArray(); // fetching all ava ...