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

Question

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

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

.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

asked by anonymous 02.10.2018 / 16:43

2 answers

3

One of the ways to solve this is by adding Bootstrap's own class 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>

02.10.2018 / 16:54

Property usage nth: child () [duplicate] Error verifying user duplication

score 2 · Accepted Answer

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

This was a col for H3 and a col for 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 into cols you can just put your HTML like this, nor do you need to do CSS. Use the native d-flex classes along with the col-12 to get it with display:flex and mr-auto on H3 for it 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>