I'm currently in the process of creating a Simon game, and everything is going smoothly until I introduce Bootstrap into the mix. Suddenly, my "Simon board" starts acting strangely.
Here's the troublesome code:
HTML:
<div class="simon">
<button id="green" class="panel 1" type="button" disabled></button>
<button id="red" class="panel 2" type="button" disabled></button>
<button id="blue" class="panel 3" type="button" disabled></button>
<button id="yellow" class="panel 4" type="button" disabled></button>
</div>
CSS:
.panel {
border: 2px solid white;
opacity: .35;
width: 200px;
height: 200px;
float: left;
font-size: 22px;
color: black;
}
.panel:hover {
opacity: .55;
}
.simon {
-webkit-box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
-moz-box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
box-shadow: 0px 0px 13px 7px rgba(0,0,0,0.58);
margin: 0 auto;
border: 5px solid black;
border-radius 10px;
display: flex;
flex-wrap: wrap;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
#yellow {
background-color: yellow;
}
#blue {
background-color: blue;
}
The issue might be related to the flex-wrap property conflicting with Bootstrap, although it shouldn't cause problems in this scenario. The "Simon" board looks perfectly fine without Bootstrap applied.
I'm not an expert in Bootstrap, but despite searching for answers, I can't seem to pinpoint why things are going off track.