1

I got a problem that I know the solution should be very simple but so far I can't seem to find the proper way to achieve this specific behaviour, basically I'm trying to move an image at the top of another div that contains some information on page resize, it's mandatory that I'm using bootstrap. I've already tried to add grid system such as col-md-6 or col-md 12 but nothing is working as I wanted..

Here is my Plunker can anyone help me out please? Thanks in advance!

PLUNKER

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>XYZ</title>
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <script>
            var news = [];

            $(document).ready(function(){

                $.ajax({
                    url: 'getNewsPage.json',
                    async: false,
                    dataType: 'json',
                    success: function (data){
                        var stringLayoutOne="";
                        stringLayoutOne += "<div class='media'><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";
                        var stringLayoutTwo = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2><div class='media-left'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div></div>";
                        var stringLayoutFour = "<div class='media'><div style='border: 1px solid' class='media-body'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";
                        var stringLayoutThree = "<div class='media'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title +"</h2><div style='border: 1px solid' class='media-body'>"+ data.news[0].body +"</div><div class='media-right'><img class='media-object' src=' "+ data.news[0].img +"'style='width: 300px; border: 1px solid'></div></div>";

                        $("#newsLayoutOne").html(stringLayoutOne);
                        //$("#newsLayoutTwo").html(stringLayoutTwo);
                        //$("#newsLayoutThree").html(stringLayoutThree);
                        //$("#newsLayoutFour").html(stringLayoutFour);
                    },
                    error: function(data){
                        console.log(data);
                    }
                });

            });


        </script>
    </head>

    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>Pagina news</h1>
            </div>
        </div>

        <div class="container" id="newsLayoutOne">
        </div>&nbsp

        <div class="container" id="newsLayoutTwo">
        </div>&nbsp

        <div class="container" id="newsLayoutThree">
            </div>&nbsp

            <div class="container" id="newsLayoutFour">
            </div>&nbsp

        </body>

    </html> 
4
  • getbootstrap.com/css/#grid is maybe what you want. Jul 31, 2015 at 8:44
  • @D_Supreme I've already tried to add grid system such as col-md-12 or col-md-6 but so far is not working
    – FabioEnne
    Jul 31, 2015 at 8:47
  • Create a fiddle. for the grid system implementation ? Jul 31, 2015 at 8:52
  • @D_Supreme I've already posted a plunker
    – FabioEnne
    Jul 31, 2015 at 8:54

3 Answers 3

1

I think this has achieved what you're looking for:

Plunker Link

I replaced your stringLayoutOne code with the following:

stringLayoutOne += "<div class='row'><div class='col-md-5 col-sm-12'><img style='width: 300px; border: 1px solid' class='media-object' src='"+ data.news[0].img +"'></div><div style='border: 1px solid' class='col-md-7 col-sm-12'><h2 class='media-heading' style='border: 1px solid'>"+ data.news[0].title + "</h2>"+ data.news[0].body +"</div></div>";

Which breaks down to this in HTML:

<div class='row'>
  <div class='col-md-5 col-sm-12'>
    <img style='width: 300px; border: 1px solid' class='media-object' src='Your Image'>
  </div>
  <div style='border: 1px solid' class='col-md-7 col-sm-12'>
    <h2 class='media-heading' style='border: 1px solid'><!--data.news[0].title --></h2>
    <!-- data.news[0].body -->
  </div>
</div>

I also put your top jumbotron in a row, and rather than using multiple containers for one page it is better to have one container and multiple rows.

In general it is better to try and only use bootstrap to govern your layout unless you have absolutely no other choice, and use your own styles only for cosmetic changes (font-size, colour, borders, etc).

1

You should have in general one container. Inside you add a row. Inside you add columns.

Say, you have a row with two columns, the image and the content. The trick is to assign multiple screen size dependent column classes to the same column. In that case during resize it will pick the corresponding class and will reflow divs so that in one visual row there is no more than 12 grid columns.

Container div
   Row div
       Image div: col-sm-12, col-md-4
       Content div: col-sm-12, col-md-8
0

Try to add ".row" divs around it

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

something like this:

<body>
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="jumbotron">
                    <h1>Pagina news</h1>
                    </div>
                </div>
            </div>  
            <div class="row">
                <div class="span3">
                    <div class="container" id="newsLayoutOne">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutTwo">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutThree">
                    </div>&nbsp
                </div>
                <div class="span3">
                    <div class="container" id="newsLayoutFour">
                    </div>&nbsp
                </div>
            </div>
        </div>
    </body>
1
  • He is using Bootstrap v3. Please post a solution for that and not v2.
    – m4n0
    Jul 31, 2015 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.