Center align two divs in the same row

Question

I have a JavaScript script that basically hides a box upon clicking the top two boxes. Upon clicking one of the boxes on top, one of the boxes on the bottom hides. How do I make the two boxes on the bottom stay centered?

Here is the landing page:

I want the divs on the bottom centered, once a box is hidden. I want the SharePoint and Teams boxes centered after the other box is hidden.

Center the bottom two div's after change ^

Code:

.margin-bottom-20 { 
	margin-bottom: 20px; 
}

.collabProjects:hover, .collabFiles:hover, .collabSocially:hover {
  box-shadow: 0 0 15px rgba(33,3,3,.2); 
}

.decisionTreeBox {
	background-color: #4B92DB;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	transition: box-shadow .3s;
}

#decisionTreeOneDrive {
	background-color: #094AB2;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}


#decisionTreeSharePoint {
	background-color: #008CE7;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#decisionTreeTeams {
	background-color: #4A1EBD;
	color: white;
	width: 300px;
	height: 140px;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#innerBoxHeadings {
	color: white!important; 
	text-align: center; 
	padding-top: 5px;
}

#columnMiddleBorderLeft, #pageTitle {
	display:none!important;
}

<div class="outer-container">
  <div class="row">
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;">
        Share and Collaborate</div>
    </div>
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;">
        Share Externally</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row">
      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
          </div>
        </div>
      </a>
       <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script>
   function projectCollab() {
   		var divsToCange = document.querySelectorAll('[data-decision]'),
   			attr = this.getAttribute('data-collaborate');
   
   		for (var i = 0; i < divsToCange.length; i++) {
   			var d = divsToCange[i];
   
   		if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */
   			d.parentNode.style.display = 'block';
   		} else {
   			d.parentNode.style.display = 'none';
   			}
   		}
   		return false;
   		}
   
   		var divButtons = document.querySelectorAll('[data-collaborate]');
   
   		for (var i = 0; i < divButtons.length; i++) {
   			divButtons[i].addEventListener('click', projectCollab);
   }
</script>

Answer 1

What you are asking for is built into BS. But you've muddied the framework by adding html where it ought not be. specifically wrapping BS cols with an anchor tag which breaks the BS grid system, specifically the rule that states only cols can be children of rows.

I've made your html substantially shorter for simplicity and altered your js somewhat to showcase the hiding part. I hope this a decent example that you can expand upon.

FIXES:

• I've moved the anchor tab inside the col. This was breaking the alignment of the BS Grid And is also incorrect markup per the BS grid system.
• I altered your JS to hide the col, not the anchor. This allows the BS flex grid to properly do it's alignment
• In the javascript, consider adding a attribute to your markup such that you don't have to navigate the right number of parent levels. As it stands, if you add more layers to the col html, your JS will break.

function projectCollab() {
  var divsToChange = document.querySelectorAll('[data-decision]'),
    attr = this.getAttribute('data-collaborate');

  for (var i = 0; i < divsToChange.length; i++) {
    var d = divsToChange[i];
    d.parentNode.parentNode.hidden = ! d.getAttribute('data-decision').includes(attr);
  }
  return false;
}

var divButtons = document.querySelectorAll('[data-collaborate]');

for (var i = 0; i < divButtons.length; i++) {
  divButtons[i].addEventListener('click', projectCollab);
}

.collabProjects:hover,
.collabFiles:hover,
.collabSocially:hover {
  box-shadow: 0 0 15px rgba(33, 3, 3, .2);
}

div[data-decision],
div[data-collaborate]{
  color: white;
  width: 200px;
  height: 100px;
}

.decisionTreeBox {
  background-color: #4B92DB;
}


#decisionTreeOneDrive {
  background-color: #094AB2;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="outer-container">
<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-4">
      <div data-collaborate="shareCollab" class="decisionTreeBox">
        Share and Collaborate</div>
    </div>
    <div class="col-4">
      <div data-collaborate="shareExternally" class="decisionTreeBox">
        Share Externally</div>
    </div>
  </div>
  <hr />
    <div class="row justify-content-center">
      <div class="col-4">
        <a href="#">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings">OneDrive</h3>
          </div>
        </a>
      </div>
      <div class="col-4">
        <a href="#">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings">SharePoint</h3>
          </div>
        </a>
      </div>
      <div class="col-4">
        <a href="#">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings">Teams</h3>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Answer 2

There's an old technique of centering the content of the parent, then making the children display: inline-block;. You will have to account for the visibility of the white-space " " character — but that is pretty well documented (e.g. Remove Whitespace Between Inline-Block Elements). You'll have to play with margin to restore your spacing, AND remember to change the JS to reflect inline-block instead of block when restoring the elements.

In the interest of selector sanity, I added an example class to the containing row element in the code demo.

HTML

<div class="row centered-buttons">

CSS

.centered-buttons {
    text-align: center;
}

.centered-buttons a {
    display: inline-block;
    vertical-align: middle;
}

.margin-bottom-20 {
  margin-bottom: 20px;
}

.collabProjects:hover,
.collabFiles:hover,
.collabSocially:hover {
  box-shadow: 0 0 15px rgba(33, 3, 3, .2);
}

.decisionTreeBox {
  background-color: #4B92DB;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow .3s;
}

#decisionTreeOneDrive {
  background-color: #094AB2;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeSharePoint {
  background-color: #008CE7;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#decisionTreeTeams {
  background-color: #4A1EBD;
  color: white;
  width: 300px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#innerBoxHeadings {
  color: white!important;
  text-align: center;
  padding-top: 5px;
}

#columnMiddleBorderLeft,
#pageTitle {
  display: none!important;
}

.centered-buttons {
  text-align: center;
}

.centered-buttons a {
  display: inline-block;
  vertical-align: middle;
}

<div class="outer-container">
  <div class="row">
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;">
        Share and Collaborate</div>
    </div>
    <div class="col-md-6" style="text-align: center;">
      <div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;">
        Share Externally</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row centered-buttons">
      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareExternally" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="shareCollab" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script>
  function projectCollab() {
    var divsToCange = document.querySelectorAll('[data-decision]'),
      attr = this.getAttribute('data-collaborate');

    for (var i = 0; i < divsToCange.length; i++) {
      var d = divsToCange[i];

      if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */
        d.parentNode.style.display = 'block';
      } else {
        d.parentNode.style.display = 'none';
      }
    }
    return false;
  }

  var divButtons = document.querySelectorAll('[data-collaborate]');

  for (var i = 0; i < divButtons.length; i++) {
    divButtons[i].addEventListener('click', projectCollab);
  }
</script>

Answer 3

In cases like this, I usually conditionally set the class of the content that changes depending on how many items are present. For example, imagine you're checking an array called items that is either 2 or 3 items long. Here is some pseudocode that shows you what I'm thinking.

let itemsClass;

if (items.length === 2) {
    itemsClass = 'col-md-6';
} else {
    itemsClass = 'col-md-4';
}

myElement.setClass(itemsClass);

You could set a click handler that would check after you click a button or whatever. In react, that could be part of your component render() method.

I don't know what you're using for JS so I won't try to write your code for you. But the gist of it is, decide the class name on the fly with JS and apply it to your elements.

edit: Sorry, I didn't read your entire code snippet. This is something you could add to the handler you already have. You'd just have to grab the elements and alter the classes at that time.

Answer 4

Add the following CSS to the row class:

<div class="container" style="padding: 0px;">
<div class="row" style="justify-content: center">

Since bootstrap uses flexbox system, this should work for you.