Challenge in creating a responsive layout using Bootstrap framework

Question

Challenge in creating a responsive layout using Bootstrap framework

I'm working with Bootstrap, but I'm struggling to achieve the desired layout.

My goal is to have the design adapt like this on different screen sizes:

----------------------
Headline  |          |
          |  image   |
----------|          |
Bullet    |          |
list      |          |
----------|----------|

For example, on a small screen, it should look like this:

----------|
Headline  |           
          |           
----------|
          |
image     |
          |
          |
          |
----------|
bullet    |
list      |
          |

Currently, only one of these layouts works. When the small screen layout is correct, the large screen layout appears like this:

----------|----------|
Headline  |          |
          |  image   |
          |          |
          |          |
          |          |
----------|----------|
Bullet    |
list      |
          |
          |

The issue is that the bullet list doesn't align under the headline as intended. It always appears after the image height.

You can view the code examples here: http://jsfiddle.net/Jw4s9/1

Would using something like be a better solution in this case?

css twitter-bootstrap

Answer 1

Answer №1

To align your image on the right at a specific breakpoint, you can apply a custom class like this:

SEE DEMO

CSS:

@media (min-width: 992px) {
    .md-pull-right {
        float: right;    
    }
}

HTML:

<div class="container">
    <div class="col-md-8">
        <h1>INSERT HEADER TEXT HERE</h1>
        <p class="lead">Include sub header text here.</p>
    </div>  
    <div class="col-md-4 md-pull-right">
        <img  src="http://www.lunkos.com/wp-content/uploads/2009/11/lolcat-faith-heealer.jpg" />
    </div>    
    <div class="col-md-8 lead">
        <ul>
            <li>1. List item one</li>
            <li>2. List item two</li>
            <li>3. List item three</li>
        </ul>
    </div>    
</div>

Ensure that the unordered list also has a col-md-8 class for proper spacing alongside the image within the layout.

Answer 2

To align your image on the right at a specific breakpoint, you can apply a custom class like this:

SEE DEMO

CSS:

@media (min-width: 992px) {
    .md-pull-right {
        float: right;    
    }
}

HTML:

<div class="container">
    <div class="col-md-8">
        <h1>INSERT HEADER TEXT HERE</h1>
        <p class="lead">Include sub header text here.</p>
    </div>  
    <div class="col-md-4 md-pull-right">
        <img  src="http://www.lunkos.com/wp-content/uploads/2009/11/lolcat-faith-heealer.jpg" />
    </div>    
    <div class="col-md-8 lead">
        <ul>
            <li>1. List item one</li>
            <li>2. List item two</li>
            <li>3. List item three</li>
        </ul>
    </div>    
</div>

Ensure that the unordered list also has a col-md-8 class for proper spacing alongside the image within the layout.

Answer 3

Answer №2

To ensure that the grid system is complete, you simply need to create a div element following the image div. Currently, there are 8 elements in the headline section and only 4 in the image section. To address this imbalance, add an empty div after the image div. You can refer to the following example: jsfiddle.net/Jw4s9/6/

Answer 4

To ensure that the grid system is complete, you simply need to create a div element following the image div. Currently, there are 8 elements in the headline section and only 4 in the image section. To address this imbalance, add an empty div after the image div. You can refer to the following example: jsfiddle.net/Jw4s9/6/

Challenge in creating a responsive layout using Bootstrap framework

Answer №1

SEE DEMO

Answer №2

Similar questions

Display the div only during the printing process

Hacking the power of combining Bootstrap 3 with AngularJS to create a unique

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

Expand the range of input movement using a unique and oversized custom thumb graphic

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

SVG is not extending to the entire viewport in mobile view

Is it possible to alter the background color once the content of an input field has been modified?

What is the best way to divide a Modal Header column into two separate sections?

Schedule Master: A sophisticated tool for time management

What is the best way to vertically align two divs on the left and right?

Using Typescript in React to render font colors with specific styling

Steps for retrieving the currently selected text inside a scrolled DIV

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

Embedding images within written content

Encircling a particular group of cells with a border

Help display tooltips for ASP.NET resources using the resx string

Mixing two elements for a continuous animation without the use of JavaScript

Dealing with ng-repeat and button alignment across Chrome, Edge, and Firefox

Arranging the placement of an arrow within an HTML dropdown menu

What is the best way to ensure these elements are neatly stacked one on top of the other?