0

.block { display: inline-block; }
.row {
  width: 100%;
  text-align: right;
}
hr {
  border-top: 1px dotted red;
}
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

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.

marlon
  • 6,029
  • 8
  • 42
  • 76

3 Answers3

0

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.

Zachiah
  • 1,750
  • 7
  • 28
0

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/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
A. Meshu
  • 4,053
  • 2
  • 20
  • 34
  • There are too much space between the items. How to make it only one white space? – marlon Nov 02 '21 at 21:40
  • add `padding-right: 0!important` - i updated the snippet. You really should work with the inspector - https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector – A. Meshu Nov 02 '21 at 21:42
  • In the inspector, how to know which overrider which? – marlon Nov 02 '21 at 21:49
  • So you right-click on the desired element, click on `inspect`, and you get on the left the dom tree and on the right the css that apply on it - and from where (the source ie bootstrap style, your file etc). My English not that good in order to continue... This is the reason i linked mdn (: – A. Meshu Nov 02 '21 at 21:52
  • It also changed my 'hr' definition when I looked at it in the inspection. How to use my own hr? – marlon Nov 02 '21 at 22:04
  • @marlon why to use boots at all.. LOL (: – A. Meshu Nov 02 '21 at 22:05
  • I want to use collapse and uncollapse to by default hide something. Is there another simple way to do it? – marlon Nov 02 '21 at 22:08
  • This example uses `jQuery`: https://stackoverflow.com/questions/64849514/how-to-open-only-1-accordion-at-one-time/64850399#64850399 I can dig to find some other answers... (: – A. Meshu Nov 02 '21 at 22:10
  • But can you please see how to fix the 'hr' display issue? I have spent some time to look at Boostrap. Also, the example you gave uses Boostrap. – marlon Nov 02 '21 at 22:11
  • Actually you got thread that explain this here: https://stackoverflow.com/questions/66110604/does-bootstrap-5-have-a-built-in-horizontal-line – A. Meshu Nov 02 '21 at 22:13
  • Which means I should use 'hr class='xxx' defined by Boostrap, not my own ? – marlon Nov 02 '21 at 22:21
  • Or like your initial question - override it style with `!important` – A. Meshu Nov 02 '21 at 22:25
0

Bootstrap is pretty much a HTML-everything-done-ready-to-go template. By editing standard Bootstrap features like Row and Container we probably do more to confuse Bootstrap and then scratch our heads as to why the site doesn't look right. I do think that when using Bootstrap there is some brain training involved with using it's own settings in our HTML instead of creating more lines of unrequired code in CSS. Eg a lot of people add Margins or Padding via CSS but this is just 3 characters long in Bootstrap HTML. class="p-5" is padding x5 for example.

Cutey from Cute Code
  • 1,065
  • 3
  • 13