I am unable to write a paragraph wrapping the table on the right. The table just expands as the paragraph expands.
I am copying the Wikipedia page format of Apj Abdul Kalam. Also, can we reduce the width of the column in the table?
Here is my codepen link: https://codepen.io/TariqueBaig/pen/zRrKpx
<body>
<div class="container">
<h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
<h3 class="text-center font-weight-light">Missile man of India</h3>
<div class="row">
<!-- <div class="col-lg-1"></div> -->
<div class="col-lg-8">
<p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise
in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation
(ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic
missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
<p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life
of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
<p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in
his hometown of Rameshwaram, where he was buried with full state honours.</p>
</div>
<div class="col-lg-4 border border-secondary">
<figure class="figure">
<img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
<figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
</figure>
<h6 class="text-center bg-primary text-white">11th President of India</h6>
<p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<th scope="row">Prime Minister</th>
<td>Atal bihari Vajpayee<br>Manmohan Singh</td>
</tr>
<tr>
<th scope "row">Vice President</th>
<td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
</tr>
<tr>
<th scope="row">Preceded By</th>
<td>K.R.Narayanan</td>
</tr>
<tr>
<th scope="row">Succeeded By</th>
<td>Pratibha Patil</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div>
Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner
and imam of a local mosque
</div>
</div>
</div>
</div>
</body>
Bootstrap .col-{…}
are structures that do not wrap, or float around each other. As their name is, they are columns.
On the other hand, floating elements can be wrapped around by text and inline elements. A floating element is one where the value of the float
css property is not none. Bootstrap 4 also has a set of shorthand classes for Float.
The example below uses the .float-right
class to push the table to the right. Also, it is important to move the markup of the table right after the headings. To change the width of the table section, you can still use the .col-{}
classes. (They set just the width
and flex
properties of the element, and without a flex container the flex does not have effect.) To set the width, another option would be to use one of the Sizing classes, but unfortunately, those not use media breakpoints.
<div class="container">
<h1 class="display-4 text-center">A.P.J. Abdul Kalam</h1>
<h3 class="text-center font-weight-light">Missile man of India</h3>
<!-- New position of the "table" -->
<div class="col-lg-3 float-right border border-secondary">
<figure class="figure">
<img class="figure-img img-fluid img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/A._P._J._Abdul_Kalam_in_2008.jpg" alt="Image of Abdul Kalam">
<figcaption class="figure-caption text-center">Kalam in 2008</figcaption>
</figure>
<h6 class="text-center bg-primary text-white">11th President of India</h6>
<p class="text-center font-weight-bold">In office<br><span class="font-weight-normal">25 July 2002 - 25 July</span></p>
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<th scope="row">Prime Minister</th>
<td>Atal bihari Vajpayee<br>Manmohan Singh</td>
</tr>
<tr>
<th scope "row">Vice President</th>
<td>Krishan Kant<br>Bhairon Singh Shekhawat</td>
</tr>
<tr>
<th scope="row">Preceded By</th>
<td>K.R.Narayanan</td>
</tr>
<tr>
<th scope="row">Succeeded By</th>
<td>Pratibha Patil</td>
</tr>
</tbody>
</table>
</div>
<!--
Long-text description comes here.
This wrapping <div> can also be omitted.
-->
<div class="this-div-could-also-be-deleted">
<p><span class="font-weight-bold">Avul Pakir Jainulabdeen Abdul Kalam</span> better known as <span class="font-weight-bold">A.P.J.Abdul Kalam</span> was born in 15th October 1931.He was the 11th President of India from 2002-2007.He was born and raise in Rameshwaram, TamilNadu, and studied physics and aerospace engineering.He spent the next four decades as a scientist and science administrator, mainly at the Defence Research and Development Organisation (DRDO) and Indian Space Research Organisation (ISRO) and was intimately involved in India's civilian space programme and military missile development efforts.He thus came to be known as the <span class="font-italic">Missile Man of India</span> for his work on the development of ballistic missile and launch vehicle technology.He also played a pivotal organisational, technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</p>
<p>Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then-opposition Indian National Congress. Widely referred to as the "People's President," he returned to his civilian life of education, writing and public service after a single term. He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</p>
<p>While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.</p>
<div>
Avul Pakir Jainulabdeen Abdul Kalam was born on 15 October 1931 to a Tamil Muslim family in the pilgrimage centre of Rameswaram on Pamban Island, then in the Madras Presidency and now in the State of Tamil Nadu. His father Jainulabdeen was a boat owner and imam of a local mosque
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>