2 images side by side - Bootstrap [duplicate] - html

Question

This question already has an answer here:
Bootstrap 3 - Aligning column height
(1 answer)
Closed 6 years ago.
Beginner here, I am building a one page bootstrap site, I have divided the site into sections, i have already added 1st image as the background in section one.
I have tried using the columns but no vial.
I cant get the two images side by side like shown in the prototype (http://imgur.com/a/MJQ2w).
I want the page layout to be like this with no margins but i am unable to do this with bootstrap. Please help me with your expertise.
<header style="background-image: url('static/assets/home-bg.jpg');">
<div class="intro-content">
<div class="brand-name">Learning & Experience</div>
<hr class="colored">
<div class="brand-name-subtext">Lorem Ipsum Dolor Init
</div>
</div>
<div class="scroll-down">
<a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a>
</div>
</header>
<section id="about">
<div class="container-fluid">
<div class="row row-no-gutter">
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
</div>
</div>
<div>

Answer 1

Check my example here, Without removes any padding provide by bootstrap
HTML
<section class="values">
<div class="col-md-4 box text-white box blues">
<div class="box-home">
<h4>our values</h4>
<p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p>
<div class="icon-text">
<p>01.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box bg-city blacks">
<div class="box-home">
<h4>our philipsophy</h4>
<p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p>
<div class="icon-text">
<p>02.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box blacks">
<div class="box-home">
<h4>our mission</h4>
<p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p>
<div class="icon-text">
<p>03.</p>
</div>
</div>
</div>
</section>
DEMO

Answer 2

Replace your code
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
With following line of code
<div class="col-md-6">
<img src="static/assets/training.png" class=" img-responsive" />
</div>
<div class="col-md-6">
<img src="static/assets/recruit.png" class=" img-responsive" />
</div>

Answer 3

Fixed the issue, Thanks guys.
<section id="about">
<div class="container-fluid">
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="static/assets/training.png" alt="training" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="static/assets/recruit.png" alt="recruit" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
CSS :
img {
width: 100%;
height: 100%;}
.imgcont {
padding: 0px;