Tips for adjusting the offset dimensions in Bootstrap 4 grid systems

Incorporating Bootstrap 4 into my Angular 8 application, I am faced with an issue on the main page where I have two components sized md-5 and md-6, respectively. To create a gap between them, I used offset-md-1. However, the offset size is too large, resulting in more space than desired between the components. Is it possible to reduce the size of the offset? Can offset-md-0.5 be used for this purpose? Alternatively, are there better approaches than relying solely on the bootstrap offset feature?

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 offset-md-1">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>
htmlcssbootstrap-4frontendangular-ui-bootstrap

Answer №1

Replace offset-md-1 with ml-auto for better results.

Give this code a try:

<div class="container-fluid padding">
    <div class="row">
        <div class="container1 col-xs-12 col-sm-12 col-md-5">
            <app-projectstatus></app-projectstatus>
        </div>
        <div class="container2 col-xs-12 col-sm-12 col-md-6 ml-auto">
            <app-upcomingreleases></app-upcomingreleases>
        </div>
    </div>
</div>

This should work perfectly for your needs.

Note: I don't understand why offset-md-1 is causing issues. The default CSS property for this class is fixed to margin-left: 8.333333%; in Bootstrap. You can still use this class, just ensure you don't modify the width of col-**-*.

Thank you for your attention...

Answer №2

In bootstrap-4, there are no classes such as *-xs-*. Instead, use col-12. `col-xs-*` not working in Bootstrap 4

There are three methods to create space between columns.

  1. Add margin-x on .col-*.
  2. Add padding-x on .col-*.
  3. Use justify-content-between on .row.

Margin can be tricky as it impacts the total width of columns. The sum of width + margin-x should not exceed the width of .row to avoid column breaks.

The total width of two columns on a md-screen is 91.667%, leaving 8.333% free space that can be controlled for placement.

offset-md-1,mr-auto, ml-auto, and justify-content-between all result in 8.333% spacing between columns.

If you want half of the space (8.333% / 2) between them, you'll need to utilize custom CSS since this functionality is not available in bootstrap-4.

Now, with custom CSS, the total width + margin of both columns can be adjusted to 95.833%, maintaining alignment and creating free space for adjustments on x-sides of columns if desired.

Additionally, consider using padding-x which does not impact the total width of columns.

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

Step-by-step guide on duplicating an element and incrementing its ID by one

Hello, I am currently working on developing a form builder by creating elements, putting them in a list group, and then making them draggable. The functionality is working well so far, but I have encountered an issue - when I drag an item and place it, the ...

javascripthtml

Leveraging JQuery to locate specific text within an element and execute a function

Currently, I am attempting to create an alert if a certain text string is found within an element. Below is the code I have been working on so far: <div class="first">This is the first div</div> <div class="second">This is the second div ...

javascriptjqueryhtml

Tips for stopping table column width growth when an icon is inserted into a cell dynamically

In the table I have, the header is clickable and when clicked, it triggers sorting. Clicking on the header title adds an icon (ascending or descending) to the right of the title, causing the column width to increase based on the size of the icon. Refer to ...

htmlcssangularhtml-table

The value of "asp-route-id" is dynamically determined through the use of

Hey there, I’m looking to dynamically pass a value from "codeDrink" to my controller using "asp-route-id" and Ajax in my ASP.NET MVC project. This is how I am handling it in my view: <p> <a id="deleteLink" asp-action="Delete& ...

javascripthtmlasp.netajax

Explore the limitless possibilities of using jQuery Superscrollorama with fixed backgrounds

I am looking to achieve a scrolling effect with multiple elements, specifically three pictures in this case. While it is easy to implement scrolling, my goal is to keep the background fixed during the scroll event and have it move once the scrolling is co ...

jqueryhtmlcsssuperscrollorama

Unable to compress or condense several items

Trying to figure out how to create an Expand/Collapse button using bootstrap. I have two items that can be expanded or collapsed individually, as well as a main button that should expand or collapse all items at once. The problem is that if one item is exp ...

htmlbootstrap-4toggle

How to display HTML content in a UIWebView on iOS devices

When loading html content in a UIWebView on an iPhone6, I encountered an issue where actionable buttons triggered a pop-up in the middle of the content. However, since the content spanned approximately 6-7 pages, the user was unable to see the pop-up as it ...

htmliosobjective-cuiwebview

Aligning a badge to the right in Bootstrap 4 modal-header

I'm struggling to make the "Banana Score" badge float to the right in Bootstrap 4. Is this even possible? I've experimented with various flex variations, and the best I could come up with was using columns as a workaround, but it looks worse tha ...

cssbootstrap-4

Is it possible to change the color of an element in Angular when using the ngClass and ngStyle directives with

Hey everyone! I've created a StackBlitz demo for reference, where I used an expansion panel to expand content based on click events. For example, clicking on the All element expands all content, while clicking on the B element expands only 'B&apo ...

cssangularng-classng-style

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...

cssreactjsnpmsass

Looking for a simple method to display a popover using conditional if/else statements?

On my website, I am utilizing JavaScript to determine the user's Facebook status. This includes checking if the user is already logged in and has allowed our app, if they are logged in but haven't authorized our application, or if they are not lo ...

javascripthtmlfacebookpopup

Press the button to move the slider

I implemented a scroll slider with dynamic content by following an example from jquery.com. Now, I am looking to enhance it further by adding left and right image buttons to control the scrolling and remove the scrollbar completely. <html lang="en"&g ...

javascriptjqueryhtml

"Revamp your Node.js and HTML with the click of a

I recently built a basic counter for my website, but I'm having trouble with its consistency across different browsers and computers. The button seems to work only about 1/12th of the time. Any tips on making it more reliable? Any help would be great ...

javascripthtmlnode.jsexpress

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

Ensure to validate the character length prior to saving data using an ajax request

When I try to save data using ajax/jquery, the character length pattern check does not work as expected. The form tag includes: pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be at least 6 characters')" Below is the form and a ...

jqueryhtmlajax

Hiding horizontal lines in a table without affecting vertical lines (Material-ui) - a step-by-step guide

Is there a way to hide the horizontal lines and timeslots in the table below without affecting the vertical lines? I attempted to use the visibility property on the td elements, but it hides both sets of lines. Any suggestions on how to resolve this is ...

htmlcssreactjsmaterial-ui

Creating a responsive layout with Bootstrap using fluid rows and columns of varying heights

Using dynamic creation, I am tasked with generating a set of boxes each with slightly varying heights and ensuring that 2, 3, or 4 of them (based on screen size) appear on the same row. Here is an example of my attempt using Bootstrap: <div class="cont ...

htmlcsstwitter-bootstrap

After integrating Tailwind/Flowbite, I am experiencing an issue with the border in my CSS code

I am facing an issue with tailwind and flowbite integration I had successfully styled my inputs with a "border-bottom 1px solid black" rule to have a single bottom border. However, after installing tailwind and flowbite, my border styling is no longer wor ...

htmlcssreactjstailwind-cssflowbite

I will receive a 404 error if I try to access a URL without including the hashtag symbol

Is it feasible to display a record by directly inputting the user ID in the URL without using the # symbol? I am currently working on a website where I have a single view page named Login.html. I want to be able to access this page by entering the user&ap ...

angularjshtmlurlurl-routingangularjs-routing

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

The following code is quite simple: <a>This is a link</a> In a demonstration of Bootstrap 4 Alpha 2 here, the link appears blue. When you hover over it, it turns dark blue. However, in a demonstration of Bootstrap 4 Alpha 3 here, it displays ...

csstwitter-bootstraptwitter-bootstrap-4