Items within a shared container are currently displaying stacked on top of each other

I am facing an issue with my bike images and manufacturer names appearing on top of each other instead of next to each other. Despite using "col-md-12", the grid columns are not aligning horizontally as expected. How can I adjust the code so that each image appears beside one another?

HTML

<!DOCTYPE html>
&;lt;html ng-app='formApp'>

<head>
    <title>Bicycle App</title>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link href="app.css" rel="stylesheet">
</head>

<body>
    <div class="header">
        <div class="container">
            <div class='row'>

                <div class='col-md-12'>

                    <i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
                </div>
            </div>
        </div>
    </div>
    <div class="container">


        <div class="row">

            <div class="col-md-offset-3 col-md-6">
                <!-- end class not needed -->
                <div class="chooseTitle">
                    Choose Your Bicycle
                </div>
            </div>
            <div class="col-md-12">
                <!-- you missed md from offset, end class not needed -->
                <div class="products" ng-controller="BikeController">
                  <div ng-repeat="product in products">
                  {{product.manufacturer}}
                  <br>
                  <img id="bikePic" ng-src="{{product.image}}">
                  </div>

                </div>
            </div>
        </div>


    </div>



    <script src="bower_components/angular/angular.js"></script>
    <script src="app.js"></script>
</body>

</html>

app.js

    var app = angular.module('formApp', []);
app.controller('BikeController',['$scope', function($scope){

$scope.products = [
{
manufacturer: "Trek",
image: 'images/bike1.jpg'
}, 
{
manufacturer: "Mongoose",
image: 'images/bike2.jpg'

},
{

    manufacturer: "Portlandia",
image: 'images/bike3.jpg'
},
{

    manufacturer: "Giant",
image: 'images/bike4.jpg'
},
{

    manufacturer: "Framed",
image: 'images/bike5.jpg'
}
];


this.form = {};
this.addForm = function(product){

};

}]);

app.css

.header{
    font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
position:relative;
padding-top:10px;
padding-left:16px;
margin-left:-10px;
 margin-right:-10px;
margin-top:-10px;

}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{

font-size:60px;

}

.products{
color:red;

font-size:60px;

}
#bikePic{

height:20%;
width:20%;

}

Answer №1

Your use of col-md-12 for each image is causing the DIV to expand across all 12 columns, the maximum allowed per row.

To optimize layout, consider using a smaller number of columns per div where the total equals 12, like this:

<div class="row">
<div class="col-md-4">img</div>
<div class="col-md-4">img</div>
<div class="col-md-4">img</div>
</div>

Another example:

<div class="row">
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
<div class="col-md-2">img</div>
</div>

By ensuring the sum of column values in a row adds up to 12, you'll achieve optimal width distribution.

Answer №2

col-md-12 signifies that the column spans 12 segments in width within Bootstrap's grid system. Since Bootstrap's container is also 12 segments wide, this means your column will take up the full width and stack vertically.

For more information, refer to the documentation here.

  • To create 3 columns, use col-md-4 ... (12 / 3 = 4)
  • For 4 columns, use col-md-3 ... (12 / 4 = 3)
  • If you need 6 columns, go for col-md-2 ... (12 / 6 = 2) ... and so forth.

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

Adjust the row based on the smallest picture

I am looking to create a photo grid using Bootstrap with images pulled from the Google Places API. The issue I am facing is that currently, the row adjusts to the height of the tallest image, but I want it to be the other way around. <div class="contai ...

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

Unusual Blank Space Found Beneath a Displayed Block Item

I've noticed some odd whitespace appearing under all my display: block elements within a meganavigation. Despite adding the code snippet below (which also determines column widths), I can't seem to pinpoint what's causing this issue. Wheneve ...

Having trouble locating a method in $scope following angular $compile

Apologies for the simple question, I am a beginner in AngularJS and front-end development. I am attempting to create a modal using bootbox as shown below: In Service: function _modalData(){ let element = "<div onclick=\"saveSelecti ...

The calendar on the Datetimepicker is not appearing in the proper position

I have encountered an issue while using Eonasdan bootstrap datetimepicker in a paramquery grid. Whenever I open the datetimepicker, the calendar appears hidden inside the grid. To tackle this problem, I added the following CSS condition: .dr ...

The text exceeds the width of the paragraph

Something very odd is happening, a rare occurrence in my over 20 years of web development experience. The text within the paragraph seems to be overflowing its boundaries: https://i.sstatic.net/bmB1zg7U.jpg My client specifically requested the Duffy Scri ...

The fullscreen API allows for the creation of a full-screen element containing internal elements, while also enabling the functionality

Is it possible to utilize the fullscreen API to make any element fullscreen, even if it contains multiple internal elements, while still maintaining the functionality of dropdowns and other custom elements that may be located in different areas of the page ...

"Provider not recognized: aProvider <- a" How can I locate the initial provider?

While loading the minified version of my AngularJS application, an error appeared in the console: Unknown provider: aProvider <- a This issue is due to variable name mangling. The unminified version works properly, but I prefer to use variable name ma ...

Using conditional statements in AngularJS, you can check multiple conditions using the

I am attempting to utilize angular in my slim file, but I'm uncertain how to convert an if else block into angular syntax. Although I am aware that angular does not support ng if else statements, is there a method to modify the code below to work with ...

Bootstrap - Border padding excessively wide

For a project exercise using bootstrap, I'm working on recreating a page that can be found here: https://codepen.io/freeCodeCamp/full/NNvBQW I've hit a roadblock in trying to put a border around the image. Here's the code I have so far: htt ...

Using CSS Flex to style text that has been transformed

I'm attempting to achieve a specific date display effect, but I'm running into some difficulties. Despite using flex and text transform, I can't seem to get rid of the extra width on the right side of the year. Here's my current outcom ...

Adjust the size of the text and save it in a cookie for later use

I am in need of a script that can dynamically increase and decrease the font size on a website while retaining the user's chosen setting even after they return to the site. I believe utilizing cookies is the way to achieve this functionality. Despite ...

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

Lose the scrollbar but still let me scroll using the mouse wheel or my finger on the fullscreen menu

I am currently working on a fullscreen menu design. However, when the menu appears, some elements are not visible unless I apply the overflow-y: scroll property to the menu. But I don't like the appearance of the additional scrollbar that comes with i ...

Tips for positioning elements within an ng-repeat list using absolute positioning?

Here is the HTML code: <div class = "container"> <form ng-submit = "createSticky()"> <input ng-model="formData.data" type="textarea" name="sticky_content" placeholder="add sticky text" required="true"/> <input ng-model= ...

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

Issues with CSS causing image resizing problems on Chrome, looking for solutions

On my website, I have favicons from various external domains. However, there seems to be an issue with resizing them when they are not 16px in size. Sometimes only the top or bottom half of the image is displayed, but upon refreshing the page, the entire i ...

Determine whether the server request originated from an Ionic mobile application

Currently, we are in the final stages of completing an Ionic project with a PHP backend. To enhance the security of our backend and protect it from external influences, we aim to restrict access to the backend only from within the Ionic project (native app ...

How to add Bootstrap and Font Awesome to your Angular project

After attempting to add Bootstrap and Font Awesome to my Angular application, I am encountering issues. I utilized the command npm install --save bootstrap font-awesome and included both libraries in the angular.json file as follows: "styles": ...

The issue with alignment in Angular Material components remains unsolved

When the screen size is larger than small, layout-align works well. However, when it is smaller than small, layout align does not work. <div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center"> <!-- main content ...