bootstrap - hide/show

I am new to bootstrap. I have a page set up with a bootstrap grid and form controls  (example below) .
I have two sets of user input controls, applicable in two different scenarios.

if only set of first input controls is applicatble to a user, I would like to hide the second col, and
expand first column to take the full width inside the container?

how can i achieve this  

<div class="container">
  <div class="row">
    <div class="col-sm-6">    
       .... <-- first set of input controls -->
    <div class="col-sm-6">
      ... <-- second  set of input controls -->
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Try this code:

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#YourFirstControls" aria-expanded="false" aria-controls="collapseExample">
 <div class="col-sm-6" id="YourFirstControls">    
       .... <-- first set of input controls -->

Open in new window

Or you can use multiple targets for collapse
Look this example for more information:
Julian HansenCommented:
Using BS 4
<div class="d-flex">
	<div class="flex-grow-1 bg-primary text-white a-user">User A content</div>
	<div class="flex-grow-1 bg-success text-white b-user">User B Content</div>
<button class="btn btn-primary hide-user" data-user="a-user">Toggle A</button>
<button class="btn btn-primary hide-user" data-user="b-user">Toggle B</button>

Open in new window

$(function() {
  $('.hide-user').click(function() {
    var sel = '.' + $(this).data('user');

Open in new window

Working sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mikhaAuthor Commented:
@Julian - thanks. this is perfect.

if we place a table or grid inside, like below, what would be best approach to make their width also expand and collapse , when the user B Content is hidden/shown.

<div class="flex-grow-1 bg-primary text-white a-user">
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Julian HansenCommented:
Just make the table width 100% - it will scale to fit the width of the parent.
mikhaAuthor Commented:
@Julian - thanks . That works .

I placed the doc with the class flex inside a row/col as such

<div class =row
  <div class=col-12
     <div class=flex- grow-1

And looks like <div> with flex class is bigger than the col.

Can we use inside a column, or how we control the size of the paren div ( div with flex class) ?
Julian HansenCommented:
You are mixing flex and col / row layouts - you don't need to do that - you should use flexbox only for the layout we are discussing.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.