How to place 2 columns closer together in bootstrap - html

Question

I am trying to increase a massive gap between 2 columns and give the text a smaller width while havig it all still centered.
as you can see they are very spread apart and I would really like the gap to be minimal as well as the width of the text. I'd like to try and get the left image right corner and the right image left corner to be under the program text.
here is my code:
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-6">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"/wp-content/themes/creativeforces/images/april2.jpg">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-6">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"/wp-content/themes/creativeforces/images/kids.png">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"http://www.zipzapzopimprov.com/">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>
Any help would be appreciated!

Answer 1

change class both div tag which has class='col-md-6' to class='col-md-4' and put one div tab between them with class='col-md-2' and write your text here
Like as below :
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-4">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"/wp-content/themes/creativeforces/images/april2.jpg">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-2">
your text here
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"/wp-content/themes/creativeforces/images/kids.png">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"http://www.zipzapzopimprov.com/">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>

Answer 2

How about padding ?
Like this
.col-md-6 p { padding: 0 45px; }

Answer 3

You could offset the first column by one unit and the narrow both to 5 units..
<div class="container">
<div class="row col-md-12">
<p class="text-center program-head">Programs</p>
<div class="col-md-5 col-md-offset-1">
<div class="text-center">
<img alt="" class="resize-image" id="image1" src=
"//placehold.it/300">
<p class="program-text">Creative Writing</p>
<p>This will help unleash a childs mind throught their own
words. The imagination has no limit to a young childs mind.
this is future forever in life yes hold me
now</p><button class="btn btn-primary">Learn More</button>
</div>
</div>
<div class="col-md-5">
<div class="text-center">
<img alt="" class="resize-image" id="image2" src=
"//placehold.it/300">
<p class="program-text">Improv & Comedy</p>
<p>This improv class is a fun and non-stressful way to
encourage children and young adults to communicate and
build confidence! Students will learn how to think on their
feet when expanding on an idea, story, or debate. These
classes are inspired by <a href=
"">Zip Zap
Zop</a></p><button class="btn btn-primary">Learn
More</button>
</div>
</div>
</div>
</div>
http://codeply.com/go/KRPiGeNSpm