Is this the right BEM?

Question

BEM

how to make a bem correctly? I look at examples, but I can’t apply it to my situation
, this layout should turn out

<section class="container-fluid find_franchise_wrapper">
<div class="container">
  <div class="row find_franchise d-flex justify-content-center">
 <div class="find_franchise__map">  </div>
    <div class="find_franchise__text">
      <h2>Find A Franchise Near You</h2>
      <p>Want to speak to us in person? Enter your zip code to find the nearest franchise.</p>
    </div>
 			<form action="find_franchise__form">
        <input type="text" placeholder="Enter Zip Code" class="find_franchise__input">
        <input type="submit" value="Submit" class="find_franchise__submit">
      </form>
 	</div>
</div>
</section>

Answer 1

1. Your HTML markup is dirty, and so the bootstrap has an eye-catching naming for a sausage of names, and you also stuck BEM there.
2. container-fluid find_franchise_wrapper- why do you need container-fluid here, when just a container is enough to restrict content, everything else is decided through CSS without polluting the markup.
3. If you really "shit in the code", then it's better in css, using mixins and vars, than adding justify-content-centerto HTML
Below is an example of naming in bootstrap + bem
Mix of BEM and bootstrap-grids, is it readable?