The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array:

 "styles": [
              "src/styles.sass",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

In my style.sass file, I import Bootstrap like this:

@import "~bootstrap/dist/css/bootstrap.css";

Within my header component, I have structured the elements like so:

  <div id="test" class="container">
          <div class="row">
              <div class="col-12"> 
                      <div class="col-3">
                          <img id="iconn" src="assets/img/iconf.png" />
                      </div>
                      <div class="col-5">
                          <h1 id="home">HOME</h1>
                      </div>
                      <div class="col-3 offset-2">
                          <img id="log" src="assets/img/logo_f.png" class="img-responsive" />
                      </div>
                  </div>
              </div>          
      </div>

I'm encountering an issue where the two images and text are appearing in different rows instead of being in the same row. Can someone offer assistance on how to fix this?

Answer №1

It appears that you mistakenly included an extra col-12 in your code when the correct usage should be with an offset of 1.

<div class="row">
        <div class="col-3">
            <img id="iconn" src="assets/img/iconf.png" />
        </div>
        <div class="col-5">
            <h1 id="home">HOME</h1>
        </div>
        <div class="col-3 offset-1">
            <img id="log" src="assets/img/logo_f.png" class="img-responsive" />
        </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

A versatile function capable of invoking two APIs simultaneously, with one of them being designed to return an array

Here is the code snippet that I am working with: getElements(apiUrl: string): Observable<Element[]> { return this.httpClient.get<any>(apiUrl + 'test/elements').pipe( catchError(error => { if(error.status === ...

Determine the selected radio button

----EDIT---- I am developing a jQuery mobile application and I need to determine which radio button is selected. This is the JavaScript code I'm using: function filter(){ if(document.getElementById('segment1').checked) { aler ...

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

How can I transfer the data from a file to upload it in Angular 9 without manually typing it out?

In my Angular application, I have a functionality where users can upload two files for processing on the server. However, I am looking to add a feature that allows users to simply copy and paste the contents of the files into two textboxes instead of going ...

Encountered difficulties when compiling the Angular application

When attempting to compile my Angular application, I encounter the following issue: Failed to compile. ./node_modules/@angular/material/esm5/core.es5.js Module not found: Error: Can't resolve '@angular/cdk/a11y' in '/media/DATOS/CBA ...

Angular and Bootstrap button collections

Incorporating Angular with Bootstrap, we have constructed a button group as shown below: <div class="input-group-append"> <div class="btn-group" role="group"> <button class="btn btn-sm btn-outline-sec ...

Utilizing CSS float with dynamic height

Is there a way to achieve height:auto; for a parent element even when child elements are using float:left; or float:right? Solution for the Parent Element: #parent { width:100px; height:auto; padding-bottom:10px; background:#0F0; ...

Tips for adjusting the color of a pin without altering anything else

I have a Google Marker with a default design. By default, I can create the pin with letters inside it. However, I want to change the color of this pin. So, I attempted to use this icon: https://i.sstatic.net/gFXMR.png Unfortunately, the letters shifted ...

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Currently, I am diligently working on an intricate DASHBOARD utilizing bootstrap-4. A peculiar issue arose with the implementation of <pre> within a Flexbox. However, upon closer inspection, it became evident that this was not a flexbox or <pre> ...

User interface for creating a platform resembling Product Hunt or Reddit

I am currently developing a web application similar to Product Hunt. The back-end API is up and running smoothly, and I have successfully implemented AngularJS for the front-end. However, I lack experience in designing the look and feel of the site. Shou ...

Tips for making an appended element match the height of an image

After embedding the div .soonOverlay into specific .smallCatalogBlock's, I am facing difficulty in adjusting the height of soonOverlay to match only the height of the img within smallCatalogBlock. Currently, its height extends throughout the entire co ...

How can you ensure that a row of content is accessible by making it clickable in a valid way?

I'm currently working on developing a widget that resembles a clickable bootstrap media object list that is easily accessible. https://getbootstrap.com/docs/4.3/components/media-object/#media-list The original code has the JavaScript click event attac ...

Resetting ng-select values in an Angular application: A quick guide

Currently, I am utilizing ng-select within a modal window. <div class="modal-body"> <div class="form-group has-feedback"> <ng-select #select name="currenies" [allowClear]="true" [items]="currencyList" [disabled]="disabled" (selected)="sel ...

Steps for transforming a .Net Core 2.2 / Angular 8 application into a Progressive Web App

I am currently facing challenges in converting a .NET Core 2.2 / Angular 8 app from the Visual Studio Angular SPA Template into a Progressive Web App (PWA). Despite following Angular documentation for creating and testing a basic Angular PWA, I have not be ...

Utilize CSS Steps to incorporate the initial position

I'm experimenting with CSS steps to create a unique visual effect resembling a "light board". The setup involves a column of 18 divs acting as individual "bulbs", with an animation that positions a div behind each one to simulate a "lit up bulb." The ...

Issue with Bootstrap4 styling for Django forms

I've encountered some challenges when trying to style a form in Django using Bootstrap. I've experimented with different methods but haven't been successful. Does anyone have suggestions on how to style this form using Bootstrap 4? Below i ...

Issue with default behavior of infinite scroll in Angular 4

I'm currently working on incorporating infinite scroll into my Angular 4 application. I've carefully followed all the guidelines provided on https://www.npmjs.com/package/ngx-infinite-scroll According to the documentation: By default, the dir ...

Identify all anchor elements that contain image elements

I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...

The crash during compilation is triggered by the presence of react-table/react-table.css in the code

My code and tests are functioning properly, but I am facing a challenge with my react-table file. The react-table.js API specifies that in order to use their CSS file, I need to include import "react-table/react-table.css"; in my react-table.js file. Howev ...

The close button within the modal is malfunctioning even with the implementation of the on() function

My "show more" button triggers the modal to pop up, but when I click on the X button in the top left corner, it doesn't close as expected. However, clicking outside of the box or pressing the "esc" key does work. I suspect that the issue lies with th ...