CODEWITHSUNDEEP
cssangularsassbootstrap-4
user6045391
user6045391

Reputation: 51

col doesn't align correctly

I need to align 3 element with bootstrap. I use angular 8 so in install bootstrap, i need only css (I need only the col-md, col etc) so I do:

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

            ],

in my style.sass i do :

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

so in my header component i do this:

  <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>

The problem is the two images and the text are in the different rows but i want their in the same row. Anyone can help?

Upvotes: 0

Views: 44

Answers (1)

Krishna Rathore
Krishna Rathore

Reputation: 9687

you have added extra col-12 in your code. offset should be 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>

Upvotes: 3

Related Questions