.block { display: inline-block; }
.row {
  width: 100%;
  text-align: right;
}
hr {
  border-top: 1px dotted red;
}

         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <div class="row">
      <div class="block">Lorem</div>
      <div class="block">Ipsum</div>
      <div class="block">Dolor</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

For this example, if I remove the Boostrap reference, the 3 items will be displayed horizontally on one line at right top corner:

Lorem Ipsum Dolor

But the boostrap changed it to vertical display after I adding Boostrap library. How to get the 3 items back to be displayed horizontally, still at the right top corner?

The

---

tag was changed to the following by boostrap:

hr {
    margin: 1
rem
 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}

How to use my own 'hr' defined in css file? I added my own 'hr' definition.

CodePudding user response：

You are using the classes .block and .row. Those are about as conventional as you can possibly get so bootstrap uses them as well. When you include bootstrap it overides your css. The easiest thing to do is to simply change your class names. Maybe prefix your custom classes with a prefix relating to you site. Ie if your site is bla.com use bla-block and bla-row that way you have a way lower chance of conflicting with bootstrap.

CodePudding user response：

The framework set .row flex display. It also set .block with 100% width. You can solve that like that:

.row { justify-content: flex-end;}
.block {width: auto!important;}

.block { display: inline-block; }
.row {
  width: 100%;
  text-align: right;
}
.row { justify-content: flex-end;}
.block {width: auto!important; padding-right:0!important}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <div class="row">
      <div class="block">Lorem</div>
      <div class="block">Ipsum</div>
      <div class="block">Dolor</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>