Bootstrap 4 content block alignment explained

Below is the code snippet I am currently working with:

.banner {
  background: #f9f9f9;
  width: 300px;
  height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex justify-content-between">
            <div class="banner"></div>
            <div class="banner"></div>
            <div class="banner"></div>
        </div>
      </div>
</section>

My goal is to have the banner elements display as block with spacing on mobile and tablets using flexbox. Currently, they are showing inline. How can I achieve this layout?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you consider the viewport size, you might want to utilize the d-* classes in Bootstrap

For instance, you can use

<div class="d-flex justify-content-between">

which can be

<div class="d-lg-flex justify-content-between">

By doing this, the .banner block (the default behavior of div) will persist until reaching a larger viewport

Answer №2

For adjusting the layout on smaller screens, you can modify the direction using the guidelines provided at this link.

.banner {
  background: red;
  border:1px solid;
  min-height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex  flex-column flex-sm-row justify-content-between">
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
            <div class="banner col m-2"></div>
        </div>
      </div>
</section>

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

What is the best method to implement a loading spinner within a React and Node application while using Nodemailer?

Is it possible to implement a functionality where clicking the Send button triggers a spinner next to the button, followed by changing the button text to "Message Sent"? I managed to change the button text, but there is no loading time, it happens instantl ...

htmlnode.jsreactjsexpressaxios

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...

javascriptjqueryangularjsjsonhtml

What steps can be taken to ensure the CSS/HTML image aspect ratio remains consistent on various monitors?

My square-shaped image (1:1 aspect ratio) is displaying differently across various devices when I use the codes below. While some show it as a perfect square, others display it as a rectangle. Is there a solution to maintain the original aspect ratio consi ...

htmlcss

Create a line break in Html5 to separate the "content" element from its associated class

To create a design using html and css to display numbers in an image counter related to a carousel, follow these steps: https://i.stack.imgur.com/OBAHd.png I'm encountering an issue where I need to add a line break in the "content" so that the .down ...

htmlcss

Choosing JavaScript

<select> <script type="text/javascript"> $.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data){ var mydata = new Array(); var i = 0; // индекс масси ...

javascriptjqueryhtmlselect

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

Incorrect font display occurring exclusively on Windows Chrome

There seems to be an issue with the Google served Open Sans font on my website, specifically with Win Chrome where the font appears thick and ugly. However, when I tested it on Win FF and Safari, everything seemed fine. The font also displays correctly on ...

htmlcssgoogle-chrome

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

javascriptjqueryhtmlcssajax

How do I resolve the jQuery error "unable to find function url.indexOf" when working with Vide?

I had previously asked a question regarding the use of the Vide plugin for playing background videos on my website, which can be found here. However, I am now encountering an error that is puzzling me: https://i.stack.imgur.com/UDFuU.png I am unsure abo ...

javascriptjqueryhtmlvideo

What is the best way to achieve this smooth scrolling animation on the page?

While browsing the website , I noticed a unique page scrolling effect that caught my eye. Unsure if they were using default bootstrap code or their own custom code, I was intrigued by how it worked. I attempted to find similar effects online but struggled ...

htmlvertical-scrolling

Error Encountered in jQuery UI SelectMenu

Struggling to integrate the jQuery UI SelectMenu, I keep encountering the same error in the browser console. Below is the HTML Code: <select name="files" id="files"> <optgroup label="Scripts"> <option value="jquery">jQuery.js</ ...

javascriptjqueryhtmljquery-ui

Troubleshooting: Issues with jQuery JavaScript Modal Popup functionality within MVC framework

When I click on the "Comments" link, a modal popup opens up and displays the content as expected. Now onto my issue: In the first scenario, the desired outcome is achieved but some other code does not execute. In this case, when I place the "@section" ins ...

javascriptjqueryhtmlajaxasp.net-mvc

Switch back and forth between adding and removing a table row using jQuery

Currently, I am developing a drop-down feature for a table that populates its data using MySQL. The functionality involves creating a new table row below the current one when a user clicks a button. However, instead of generating multiple new rows each tim ...

javascriptjqueryhtmlhtml-table

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Hey there! I'm currently working on a new menu design using UL and LIs elements. I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen. If you're interested ...

html-listscss

Obtaining the value of an item in an unordered list

Hi everyone, I have been trying to extract the value of <li> elements that display images horizontally. Below is the HTML code I am working with: <div id="layoutInnerOptions"> <ul id="navigationItemsContainer" class="layouts_list"> <l ...

javascriptjqueryhtmlcss

Effortlessly automate clicking with JavaScript or HTML - learn how now!

Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...

javascriptjqueryhtml

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

How can I make the arrows work on a secondary slider with EasySlider1.7?

I finally managed to get 2 sliders working on my page after reading through several other tutorials. However, I am facing an issue with the Prev & Next arrows on the second slider as they don't seem to work properly. I inherited this page from someon ...

javascriptjqueryhtmlcsseasyslider

The content loses functionality once I add an overlay color to the background image div

I'm facing an issue with a div that has a background image, text, and a button in the center. Whenever I add an overlay color on top of the background image, the text and button seem to be disabled or unclickable. My goal is to ensure that the Read M ...

javascriptjqueryhtmlcss

Activate tooltip when hovering over the <img> element

I am having trouble implementing a tooltip using CSS for an <img> element. While I have successfully added a tooltip to <a href> </a> tags, applying the same functionality to an <img> tag has proven difficult. http://jsfiddle.net/ ...

cssimagehover