problem leaving a text on the left and 2 items on the right

Asked

Viewed 60 times

2

inserir a descrição da imagem aqui

.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #000;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}


.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}


.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
<div class="container">
    <div class="row">
        <div class="col-12 text-right mt-3 mb-3">
      <h3 class="mr-0">Novidades</h3>
            <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
            <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
        </div>
    </div>
</div>

html css twitter-bootstrap bootstrap-4

2 answers

3

One of the ways to solve this is by adding the Bootstrap class itself float-left and float-right:

.col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #000;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}


.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}


.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-12 mt-3 mb-3">
      <h3 class="mr-0 float-left">Novidades</h3>
            <a class="btn btn-outline-secondary prev float-right" href="#" title="go back">>><i class="fa fa-lg fa-chevron-left"></i></a>
            <a class="btn btn-outline-secondary next float-right" href="#" title="more"><<<i class="fa fa-lg fa-chevron-right"> </i></a>
        </div>
    </div>
</div>

  • @leo opa man after q I did that the >><< Prev and next got bugged have how to give a help?

  • I put this just for example here, can take if you want.

  • Ahh verdd I had not seen that you had put the >> and << kkkkkkkkkkkkkkkkk, mds.. Vlw man!

  • I left only one way using the class, but the most indicated is as Hugo’s answer!

  • 1

    @Leandrade was worth young tmj. If you are interested I left an OBS: in my reply I explain how to use the native classes to do this, keeping everything in a Col- only, but without having to create CSS or anything.

2


I would advise you to use the separate elements within the Grid...

Of that were, a col to the H3 and a col for the Btns

    
  .col-item {
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: #000;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 100%;
}

.col-item .info
{
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.col-item:hover .info {
    background-color: #F5F5DC;
}
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}


.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}


.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />


<div class="container">
    <div class="row mt-3 mb-3">
      <div class="col-3"><h3 class="mr-0">Novidades</h3></div>
        <div class="col-9 text-right">
            <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
            <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
        </div>
    </div>
</div>

OBS:

If you want to put everything in one line, without separating the elements in cols vc can just put your HTML like this, nor need to do CSS. Use the native classes d-flex next to the col-12 for her to keep display:flex and mr-auto in the H3 for him to "paste" on the left

<div class="row mt-3 mb-3">
    <div class="col-12 d-flex">
      <h3 class="mr-auto">Novidades</h3>
      <a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
      <a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
    </div>
</div>

  • Opa Hugão, face as the buttons go left without class for them?

  • @Leandrade pq the mr-auto "pushes" them there :) actually doesn’t even need the text-right in col-12. This is a property of normal Flexbox behavior

  • The jewel man, so it’s Mr-auto who does the magic there. Thanks Hugo!!

  • 1

    @Leandrade type like this. With the d-flex in the col it becomes a flexbox container, so her children stay in line one after the other. H3 which is the first child has an automatic right margin, mr-auto, that margin "pushes" the rest of the contents right up to the end of the container :), the magic even is the rss flexbox

  • Ahh yes I understand Hugo, thank you!

  • @hugocsl https://answall.com/questions/333823/problema-com-uma-section-e-grid-no-bootstrap you could give me a hand?

Show 1 more comment

Browser other questions tagged html css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.