How to write something in between two ".col-md-*"? - html

Question

I am trying to write an "or" in between 2 ".col-md-1".
For example:
Green or Blue
This is my code:
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
What should I write inside the code or should I try another technique?

Answer 1

You could add another col-md-1 between the 2 elements (or whatever column size suits your needs):
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<p>or</p>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>

Answer 2

Depends on how the result should look like. You can do something like this for example:
<div class="col-md-3">
<button class="btn"> Green </button> or <button class="btn"> Blue </button>
</div>

Answer 3

Give them and ID.
<div class="row">
<div class="col-md-1" id="green">
<button class="btn">Green</button>
</div>
<div class="col-md-1" id="blue">
<button class="btn">Blue</button>
</div>
</div>
and then you can select the first one and append an element after it
$("$green").after('<div>OR</div>')

Answer 4

give them an ID & do the if else in Javaascript
<div class="row">
<div id="greenDiv" class="col-md-1">
<button class="btn">Green</button>
</div>
<div id= "redDiv" class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
in js
<script>
$(document).ready(function(){
if(someCondition == true){
$("#redDiv").show();
$("#greenDiv").hide();
}else{
$("#redDiv").hide();
$("#greenDiv").show();
}
});
</script>