i need an answer please : bootstrap 3 this is for a job applyment?

Question

In order to get a job , the recruitement ask me to solve this problem in order to get the job ! Here the html of the question :

<div id="header" class="col-md-12">header</div>


    <div id="content" class="col-md-12 clearfix">
        <img src="1.jpg" class="changeme">
        <img src="2.jpg" class="changeme">
    </div>

<div id="footer" class="col-md-12">footer</div>

Here the CSS of the question :

#header,
       #footer{
            width: 100%;
            height: 50px;
            background: red;
            text-align: center;
        }

        body img{
            float:left;
        }
        body img:nth-child(2n){
            float: right;
        }`

use of bootstrap 3.7.0.

I must only use a class!

See the the problem here : The jsFiddle of the problem

If this is for a job interview you should probably research the answer yourself instead of outsource it. You also haven't actually stated what the issue is — Rory McCrossan, Aug 30 '16 at 09:25
Not to be harsh but, you don't deserve to have the job if you're like that. What happens if they took you in and gave you a task that you don't know? You'll post again that you can't do it? — Wesley Brian Lachenal, Aug 30 '16 at 09:26
it would be bad if you dont do it yourself right?what if you encounter same problem when you are hired you will come to ask us to solve it again for you?piece of advice do it yourself if you get stuck ask for help from here — guradio, Aug 30 '16 at 09:26
btw... what did they ask you to do? Anyway this is not a "write code on my behalf" service site so I doubt anyone will ever answer. — Lelio Faieta, Aug 30 '16 at 09:28
i swear i spent the hole night looking for an answer but i only get to add a class="pull-left" to the second img then the emojey is completed — ls.94, Aug 30 '16 at 09:30
We still don't have the problem ... Do you have to complete the image on the left ? right ? center ? ... — Gregoire, Aug 30 '16 at 09:33
the company just post on linkedIn "we need a front-end developer ,solve this enigme using Class***:;" — ls.94, Aug 30 '16 at 09:34
@GrégoireFruleux : i'm also confused like you are in addition i'm a little bit stressed because if i get this job i'll be able to complete my master degree :/ — ls.94, Aug 30 '16 at 09:50
Then I guess it's part of the enigma ! Good luck for your degree and this tests ! — Gregoire, Aug 30 '16 at 10:04
Thanks a lot , people starts blaming me but i just needed to check if my answer is right ;) — ls.94, Aug 30 '16 at 10:11

Edison Biba · Answer 1 · 2016-08-30T09:46:09.330

0

Here you have a jsfiddle. You want this to happend only by adding a class so there it is. In the second image add the class pull-left and this is fixed.

  <div id="header" class="col-md-12">Header</div>
     <div id="content" class="col-md-12 clearfix">
       <img class="changeme " src="http://uteek.net/test/1.jpg">
       <img class="changeme pull-left" src="http://uteek.net/test/2.jpg">
     </div>
  <div id="footer" class="col-md-12">Footer</div>

edited Aug 30 '16 at 09:46

answered Aug 30 '16 at 09:29

Edison Biba

4,384
3
17
33

1

Thanks for help i really appreciate that ,but i already do that i don't know if this the right answer i only have one chance to submit my answer and i really need this job ! – ls.94 Aug 30 '16 at 09:38
Does this fixed your problem ? – Edison Biba Aug 30 '16 at 09:39
1

Thanks for help i really appreciate that , but i already did that i don't know if this the right answer because the emojey is completed but it slides to the left Like i mentioned in the previous comment ,i only have one chance to submit my answer and i really need this job ! – ls.94 Aug 30 '16 at 09:42
But what you exactly want to archive ? – Edison Biba Aug 30 '16 at 09:43
i thought they want me to assemble the two images and then center them ,i'm i wrong ? – ls.94 Aug 30 '16 at 09:45
I think that they want only to get those two images to complete only one image because this is the only thing you can archive by adding only one bootstrap class – Edison Biba Aug 30 '16 at 09:47
1

do you think i must post my answer just by adding the pull-left to the second img ? – ls.94 Aug 30 '16 at 09:48
1

Thanks a lot, i think i'll post this answer ,i really appreciate your help ! ^^ – ls.94 Aug 30 '16 at 09:55
they responded me saying that i was too close but not right :/ – ls.94 Aug 30 '16 at 15:54
They can't just say you are wrong because you have fixed that only by using a class in bootstrap so if there are many ways you have fixed in your way so just write to them again – Edison Biba Aug 30 '16 at 20:00
And i don't know why you removed the correct answer tick ? – Edison Biba Aug 30 '16 at 21:59
because it wasn't the right answer he says that i must center the images .. don't take it negatively i just want to know the good answer because i'm really disappointed – ls.94 Aug 30 '16 at 22:03

score 0 · Answer 2 · answered Aug 30 '16 at 09:33

0

Change the class in the img tags to:

 <img class="pull-left" src="http://uteek.net/test/1.jpg">
<img class="pull-left" src="http://uteek.net/test/2.jpg">

if this is what it needs or you can just change the bottom img tag

answered Aug 30 '16 at 09:33

Kyle B Cox

421
6
18

Thanks for help i really appreciate that , but i already did that i don't know if this the right answer because the emojey is completed but it slides to the left Like i mentioned in the previous comment ,i only have one chance to submit my answer and i really need this job ! – ls.94 Aug 30 '16 at 09:41

score 0 · Accepted Answer · answered Sep 16 '16 at 10:06

i found the result my self just for fun ,here the solution:

body img {
    float: left;  
}
body img:nth-child(2n) {
   float: right;
}

#content{display:flex;text-align:center;width:100%}

.changeme1{
   margin-left:auto;float:none;
}
.changeme2{
   margin-right:auto;float:none;
}

i need an answer please : bootstrap 3 this is for a job applyment?

3 Answers3