0

I am new to Bootstrap, i would like to align four images in row in large screen and in medium i want to align only two images. When i try with the following code, it is working as expected in lg. But in medium first two images are taking equal width but 3rd and 4th images are not aligned correctly.enter image description here Thanks in advance.[enter image description here][2]

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-xs-6 Imgdiv">
                <img src="Images/Car.jpg" class="img-responsive Imagesize" />
                <p class="Imagecontent">A. P. De Zoysa was born in Randombe, Ambalangoda in the Southern province of Ceylon (now Sri Lanka). His parents died in an epidemic when he was eleven, and thereafter he was brought up by his grandmother. He started his education in the nearby historic temple, the Maha Samudraramaya, and then attended the Wesleyan school in Randombe. He continued his secondary education at Mahinda College, Galle, where he came under the influence of its principal, the famous Theosophist and Pali scholar Frank Lee Woodward.[1] Later he moved to Wesley College in Colombo.</p>
            </div>
            <div class="col-lg-3 col-xs-6 Imgdiv ">
                <img src="Images/Rose.jpg" class="img-responsive Imagesize" />
                <p class="Imagecontent">Then he taught for a few years at Ananda College, Colombo and at Royal College Colombo. In 1921 he went to England and continued his higher education. In London he supported himself by coaching overseas students, and his wide social circle included the artist William Roberts, who painted his portrait. After taking an external London degree, in 1927 he was called to the Bar at Gray's Inn, and in 1929 he obtained a PhD in anthropology at London University for a dissertation on 'Observances and Customs in Sinhalese Villages'.[2]</p>
            </div>
            <div class="col-lg-3 col-xs-6 Imgdiv">
                <img src="Images/Bike.jpg" class="img-responsive Imagesize" />
                <p class="Imagecontent">With his wife, née Eleanor Hutton, whom he had met at the Buddhist mission in London and married in 1929, in 1934 de Zoysa returned to Sri Lanka, and began work as a lawyer. He was elected to represent Colombo South in 1936, and he continued to serve in the State Council (as an independent) until 1947. Causes which he supported included opposition to the death penalty, anti-dowry legislation, and improved state education. For many years he was also a municipal councillor in Colombo, taking up local issues and campaigning to improve the city's amenities.</p>
            </div>
            <div class="col-lg-3 col-xs-6 Imgdiv">
                <img src="Images/Strawberry.jpg" class="img-responsive Imagesize" />
                <p class="Imagecontent">In 1939 de Zoysa bought a printing press, and began to produce a series of educational books in Sinhala; he also edited a weekly paper, the Dharmasamaya. But his greatest project, which took over twenty years, with help from Buddhist scholars, was to publish a translation of the whole Tripitaka canon of Buddhist scripture into simple Sinhala; this eventually ran to forty-eight volumes. A concise edition, in about ten volumes, was incomplete at his death. He also compiled and printed English–Sinhala and Sinhala-English dictionaries</p>
            </div>
        </div>
    </div>

       <div class="container">
            <div class="row">
                <div class="col-lg-3 col-xs-6 Imgdiv">
                    <img src="Images/Car.jpg" class="img-responsive Imagesize" />
                    <p class="Imagecontent">A. P. De Zoysa was born in Randombe, Ambalangoda in the Southern province of Ceylon (now Sri Lanka). His parents died in an epidemic when he was eleven, and thereafter he was brought up by his grandmother. He started his education in the nearby historic temple, the Maha Samudraramaya, and then attended the Wesleyan school in Randombe. He continued his secondary education at Mahinda College, Galle, where he came under the influence of its principal, the famous Theosophist and Pali scholar Frank Lee Woodward.[1] Later he moved to Wesley College in Colombo.</p>
                </div>
                <div class="col-lg-3 col-xs-6 Imgdiv ">
                    <img src="Images/Rose.jpg" class="img-responsive Imagesize" />
                    <p class="Imagecontent">Then he taught for a few years at Ananda College, Colombo and at Royal College Colombo. In 1921 he went to England and continued his higher education. In London he supported himself by coaching overseas students, and his wide social circle included the artist William Roberts, who painted his portrait. After taking an external London degree, in 1927 he was called to the Bar at Gray's Inn, and in 1929 he obtained a PhD in anthropology at London University for a dissertation on 'Observances and Customs in Sinhalese Villages'.[2]</p>
                </div>
                <div class="col-lg-3 col-xs-6 Imgdiv">
                    <img src="Images/Bike.jpg" class="img-responsive Imagesize" />
                    <p class="Imagecontent">With his wife, née Eleanor Hutton, whom he had met at the Buddhist mission in London and married in 1929, in 1934 de Zoysa returned to Sri Lanka, and began work as a lawyer. He was elected to represent Colombo South in 1936, and he continued to serve in the State Council (as an independent) until 1947. Causes which he supported included opposition to the death penalty, anti-dowry legislation, and improved state education. For many years he was also a municipal councillor in Colombo, taking up local issues and campaigning to improve the city's amenities.</p>
                </div>
                <div class="col-lg-3 col-xs-6 Imgdiv">
                    <img src="Images/Strawberry.jpg" class="img-responsive Imagesize" />
                    <p class="Imagecontent">In 1939 de Zoysa bought a printing press, and began to produce a series of educational books in Sinhala; he also edited a weekly paper, the Dharmasamaya. But his greatest project, which took over twenty years, with help from Buddhist scholars, was to publish a translation of the whole Tripitaka canon of Buddhist scripture into simple Sinhala; this eventually ran to forty-eight volumes. A concise edition, in about ten volumes, was incomplete at his death. He also compiled and printed English–Sinhala and Sinhala-English dictionaries</p>
                </div>
            </div>
        </div>
Vishal
  • 1
  • 2
  • Looks like the Bootstrap column height issue: http://stackoverflow.com/questions/22310912/bootstrap-row-with-columns-of-different-height/22311212#22311212 You need to use a clearfix on `md` widths – Carol Skelly May 10 '17 at 11:24
  • I've just tested the two answers in the duplicate link above and have to say that some adjustment need to be done to satisfy this question. – hans-könig May 10 '17 at 11:52
  • I add a visible-md class, i.e
    , between the 2nd and 3rd items so that on lg-screens it remains 4 rows. I adjusted each item to
    so that you have a nice single column in xs-screens.
    – hans-könig May 10 '17 at 12:03
  • It is working for me, Thank you!!! – Vishal May 10 '17 at 13:45
  • Could you please let me know the site where i can learn Bootstrap perfectly. – Vishal May 10 '17 at 14:07

1 Answers1

0

No Problem. It is simple to learn Bootstrap. Use

col-xl-* for large screens.
col-md-* for medium screens.
col-sm-* for small screens.
col-xs-* for extra small screens.

I think using col-md-6 will solve your problem. Please try.

Black_Knight
  • 23
  • 1
  • 6