Looking to achieve a stretch-auto-auto column layout in Bootstrap 4 - how can this be done?

Essentially, I am looking for something similar to this:

https://i.sstatic.net/ss3Ir.png

Can this layout be achieved using columns instead of floats?

<div class="clearfix">
   <div class="float-left"><button class="rounded btn btn-outline-dark btn-sm">Expand All</button></div>
   <div class="float-right">
      <nav aria-label="...">
         <ul class="pagination">
            <li class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>
            <li class="page-item active bg-dark"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
         </ul>
      </nav>
   </div>
   <div class="float-right"><span>2 Results</span></div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to align elements using Bootstrap 4, consider utilizing flexbox. A clever technique demonstrated here involves applying the ml-auto (margin-left:auto) class to the middle DIV in order to shift it to the right. You can also utilize the order- class to rearrange the sequence of the DIVs.

For a live example, check out: 

    <div class="d-flex">
        <div>
            <button class="rounded btn btn-outline-dark btn-sm">Expand All</button>
        </div>
        <div class="order-last"> 
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>
                    <li class="page-item active bg-dark"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
                </ul>
            </nav>
        </div>
        <div class="ml-auto py-2"> <span>2 Results </span> </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

Encountered a MultiValueDictKeyError in Django at /employeeUpdate/ after making changes to the data

Encountering a django error "MultiValueDictKeyError at /employeeUpdate/ 'id'" after making changes to the data. Here is the code snippet from my views.py: def employeeUpdate(request): id = request.POST['id'] emp_username = requ ...

pythonhtmlcssdjangoweb-applications

How can I perform a MySQL UPDATE using 2 parameters received from an AJAX request ($_POST)?

I am currently working on an AJAX call that updates a row in the database based on the ID (pid=38) and changes the value of a column to NULL depending on the button clicked (taskimg0). I have managed to make it work by hardcoding the value $_POST['dtf ...

phpjqueryhtmlmysqlajax

The background image is not displaying properly within a <span> tag

I am attempting to show a smiley icon within a span tag that is nested inside a list item. Below is the code snippet: <p> It contains various tabs:{" "} <li> Home - Showcase and brief informati ...

htmlcssreactjsstyles

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

javascriptjquerycss

Arranging nested Divs for horizontal scrolling purposes

I'm struggling to achieve horizontal scrolling only in my provided example link HERE. It seems like a simple fix should be adding {overflow-x:auto; and overflow-y:hidden;} in the CSS, but I've tried that and it's not giving me the desired re ...

htmlcss

Define the number of columns in CSS Grid and ensure that rows wrap accordingly

tag, I need to utilize CSS grid with 12 columns while ensuring that the tables stack in a column layout when the viewport size decreases. Is it possible to accomplish this using CSS grid? My research suggests that for row wrapping, I must use either ' ...

csscss-grid

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

javascriptcssmarquee

What is the best way to implement the nth:child selector in conjunction with the each function for handling JSON data in

Here is the HTML code I have written: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flickr Feed</title> <link href="../_css/site.css" rel="stylesheet"> <link rel="stylesheet" type= ...

jqueryhtmljson

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

javascriptreactjscssreact-nativereact-native-textinput

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

What is the best way to showcase every user on my webpage using HTML?

After running this code snippet in my python terminal, I was able to see the desired output: views.py from django.contrib.auth.models import User userList = User.objects.all() print(userList) The above code produces the following result in the terminal: ...

htmldjangodjango-viewsdjango-templates

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

htmlcss

Having trouble choosing a dropdown value with ng-model; the first item keeps showing up as blank when selected

When I attempt to select a dropdown value inside an AngularJS function by setting the value to the ng-model, the dropdown initially shows a blank value selected. Below is my HTML code: <select class="pulldown" ng-model="test" ng-options="obj as obj.des ...

javascripthtmlangularjs

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

I am currently facing an issue with two text fields in my HTML form. Here is how they are set up: HTML : <input type="text" id="input1" onchange="doSomething();" disabled/> <input type="text" id="input2"/> JavaScript : function doSomething( ...

javascriptjqueryhtml

Iframes are not compatible with JQuery UI dialogs

After attempting to open a URL within an Iframe in a JQuery dialog box, I encountered the following issue: Here is the code snippet that I used: http://pastebin.com/Wqf0mGhZ I am looking for a solution to make sure that the dialog displays all of the con ...

javascriptjqueryhtmliframejquery-ui-dialog

Challenges with the final child element's CSS styling

Hey everyone, I've recently added the following CSS: #tab-navigation ul li:last-child { background-image: url(../images/tabs-end.gif); background-repeat: no-repeat; color: #fff; display: block; border: 1px solid red; backgrou ...

htmlcss

The issue of HTML Service Submit Form not triggering the google.script.run function

Everything was going smoothly with my script until it suddenly stopped functioning properly. A user selects an option from a custom menu, triggering a dialog box (HTML Service form) to collect two parameters as intended. Upon submitting the form, the fol ...

htmlgoogle-apps-script

What's the difference between using find_all on a bs4.element.ResultSet object and a list in Beautiful Soup

When I use the find_all method on a beautifulsoup object, it returns either an bs4.element.ResultSet object or a list. However, I am unable to directly apply the find_all method on the bs4.element.ResultSet object. One way to work around this is by loopin ...

pythonhtmlbeautifulsouphtml-parsing

What is the best way to completely eliminate a div from a webpage

I've created a new div element using jQuery: $(document.body).append('<div id="test"></div>'); Then, I display a success message and remove the div after 10 seconds: $('test').html('SUCCESS!'); setT ...

javascripthtmljquerycssecmascript-6