CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
msmith1114
msmith1114

Reputation: 3229

Bootstrap changing flex-box?

I have a simon game Im creating, and it's fine and dandy until I actually implement bootstrap, then my "simon board" gets all wonky.

The offending 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 only thing I can think is that maybe the flex-wrap is affecting bootstrap.....but it really shouldn't in this case. Without bootstrap getting required this "Simon" board looks completely fine.

Im no expert at bootstrap, but i've been searching around and can't figure out why exactly this should be going awry.

Upvotes: 0

Views: 54

Answers (1)

LKG
LKG

Reputation: 4192

Change css code :

.panel_new {
  border: 2px solid white;
  opacity: .35;
  width: 200px;
  height: 200px;
  float: left;
  font-size: 22px;
  color: black;
}
.panel_new:hover {

  opacity: .55;
}



<div class="simon">
     <button id="green" class="panel_new 1" type="button" disabled></button>
     <button id="red" class="panel_new 2" type="button" disabled></button>
     <button id="blue" class="panel_new 3" type="button" disabled></button>
     <button id="yellow" class="panel_new 4" type="button" disabled></button>
</div>

Bootstrap using panel class so it can be conflict to your css part

Upvotes: 2

Related Questions