CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Omar Gonzales
Omar Gonzales

Reputation: 4008

How to put two divs on same line in bootstrap

I've 2 divs. I'm using Bootstrap.

I want to have the text and start aligned and close to eachother.

Rightnow, I was playing with col-md-x but not getting what I need:

Expected:

enter image description here

Actual:

enter image description here

Codepen:

https://codepen.io/ogonzales/pen/yLLjLjr

Upvotes: 7

Views: 32935

Answers (4)

Vysakh Vijayakumar
Vysakh Vijayakumar

Reputation: 75

You can try adding the div's that you want to align inline like below

<div class="d-flex">
 <div class="d-inline-block"> Your div 1 </div>
 <div class="d-inline-block"> Your div 2 </div>
</div>

Upvotes: 3

VSM
VSM

Reputation: 1785

Try this Jsfiddle link here. To fix this issue I have used only three bootstrap classes .d-flex, .align-items-center and .d-inline-block. It is not a best practice, applying .row and .col classes everywhere in your layout. You need to understand the right place for their application. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center">
            <div class="d-inline-block">
                <h2 id="product-name" class="">Stickers troquelados</h2>
            </div>
            <div class="d-inline-block">
                    <span class="">
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star-half-alt"></i>
                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->
                            858 comentarios
                    </span>
            </div>
    </div>

Upvotes: 13

Ronak Khangaonkar
Ronak Khangaonkar

Reputation: 346

There is no need of adding css styles, if you are using bootstrap, as bootstrap works completely on grid system you need to adjust the columns and rows as per your convenience.

I have updated your code just have a look on it, and tell me if anything you want to make change in the code 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
            <div class="d-inline-block">
                <h2 id="product-name" class="">Stickers troquelados</h2>
            </div>
            <div class="col-5 pt-2">
                             <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star"></i>
                            <i class="gold-star fas fa-star-half-alt"></i>
                            <!-- <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star"></i></a>
                            <a class=""><i class="gold-star fas fa-star-half-alt"></i></a> -->
                            858 comentarios
            </div>
    </div>

I am also adding codeSandbox link so you can understand more concisely.

Link :- CodeSandBox

Upvotes: 1

Gangadhar Gandi
Gangadhar Gandi

Reputation: 2252

Use Flexbox,

<div class="row-div">
  <div>Stickers troquelados</div>
  <div>***** 858 Comments</div>
</div>

css,

.row-div {
  display: flex;
  justify-content: center;
}
/* Having some margin to make the two divs some distance */
.row-div>div {
  margin-right: 5px;
}

Upvotes: -1

Related Questions