Arrange content within DIVs using Bootstrap-4

I'm having trouble figuring out how to align and organize my div content using Bootstrap. I'm a bit confused about how it all fits together

align-items- * text-* align-self- * justify-items- * justify-self- *

I'm attempting to structure my website in the following manner:

https://i.sstatic.net/8TLS2.png

However, I'm struggling to align the content so that it seamlessly aligns with the left or right edges, or so that the content is centered, whether it be an image, text, or another div. I'd prefer not to use padding or margins as I'm aiming for responsive design and those could cause other issues. Thank you for any assistance, much appreciated.

htmlcssbootstrap-4

Answer №1

Here is a helpful starting point for you:

check out this fiddle for experimentation

.MainDiv {
  border: 1px solid red;
  height: 210px;
  width: 100%;
  display: flex;
  margin: 5px;
}

.First {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-start;
  margin: 5px;
}

.FirstSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
}

.Second {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: center;
  margin: 5px;
}

.SecondSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: center;
}

.Third {
  border: 1px solid blue;
  width: 33%;
  height: 200px;
  display: flex;
  justify-content: flex-end;
  margin: 5px;
}

.ThirdSubDiv {
  border: 1px solid green;
  height: 200px;
  width: 50%;
  text-align: right;
}
<div class="MainDiv">
  <div class="First">
    <div class="FirstSubDiv">
      contents are in left;
    </div>
  </div>

  <div class="Second">
    <div class="SecondSubDiv">
      contents are in center;
    </div>
  </div>

  <div class="Third">
    <div class="ThirdSubDiv">
      contents are in right;
    </div>
  </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

Adjust transparency in Bootstrap slider with picture indicator

Currently, I am in the process of creating an HTML page featuring a Bootstrap carousel. To enhance user interaction, I have replaced the standard selector with images that, when clicked, will transition the slider to display corresponding content. In orde ...

htmlcssbootstrap-4bootstrap-carousel

In Firefox, the scaling of svg masks is not functioning properly

Trying to utilize an svg for masking an image, but encountering scaling issues in Firefox. Safari and Chrome seem to display correctly, with proper fallbacks for IE. Website: SVG File: CSS: -webkit-mask: url("../img/feelfilms-logo.svg#logo_mask"); mask ...

csssvgscalemask

Learn how to use fabric.js to layer a png image over a canvas and create a mask effect

https://i.sstatic.net/yT16J.png Is there a way to mask all canvas objects using a single layer? I have a png file that I want to use as a layer, which I load from a URL. What would be the best approach to achieve this? I have tried one method where I cli ...

htmlcanvasfabricjs

Selenium encountering difficulty extracting data via VBA with error message "NoSuchElementError"

Hello everyone, I'm new here on StackOverflow and seeking some assistance. I am attempting to extract data from a table on a website using Selenium for the first time. However, I encountered an issue while trying to use FindElementByClass as it return ...

htmlexcelvbaselenium-webdriver

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

I am currently working on a feature that allows users to open a .txt or .html file from their file explorer and paste the contents into a textarea for editing and saving purposes. My question is whether it's possible to read the file content and auto ...

javascripthtmljquerycss

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

When utilizing Blazor to create dynamic URLs within a loop, incorrect references may be generated

While working on a Blazor web assembly application, I encountered an issue when trying to loop over content to generate URLs for MP3 files. The media files are named "1.mp3", "2.mp3", "3.mp3", and so on. Imagine having a razor page with the following con ...

c#htmlrazorforeachblazor

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

htmljquerycss

The elements within the grid remain static and do not adjust their size according to the movement

My current challenge involves a grid showcasing four squares that should shrink responsively when one expands on hover. Although the other squares do respond, their resizing occurs only after the transition is complete for the expanding square. I am curiou ...

htmlcsscss-animationscss-grid

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

javascriptjqueryhtml

What is the process for activating a button after a checkbox has been selected? Additionally, how can a value be dynamically transferred from a checkbox to the rezBlock_1 block?

What could be the reason for my code not functioning properly? How can I enable a button once a checkbox is selected? Also, is there a way to dynamically move text from a checkbox to the rezBlock_1 block? CODPEN https://codepen.io/RJDio/pen/RwPgaaZ doc ...

javascripthtmlcss

Save hyperlinks provided by users within the text

Users have the ability to create a post and leave a comment. I am aiming to give my users the option to include a hyperlink in their comment, such as: "This is a comment where aboutme is a hyperlink." I am unsure of how to store this hyperlink. Currently, ...

phphtmlmysqllaravel

Developing a versatile table component for integration

My frontend app heavily utilizes tables in its components, so I decided to create a generic component for tables. Initially, I defined a model for each cell within the table: export class MemberTable { public content: string; public type: string; // ...

htmlangulartypescript

Deactivate the selection box feature while keeping the existing value in the post

Within my current asp.net-mvc project, there is a specific page where users can make selections from a dropdown box that triggers a post request to update multiple values. To prevent any confusion caused by delays in the postback process leading to uninten ...

c#.nethtmlasp.net-mvcpostback

Unable to locate href within form when button is clicked

Whenever I try to click the borrow button, it directs me back to itself instead of executing the borrowing.php action. Can anyone suggest a solution for this issue? <form id = "myform" action="includes/borrowing.php" method = "POST" enctype ="multipart ...

phphtmlmysqlformsbootstrap-4

Is it possible for the JavaScript DOM API to retrieve the exact casing of attribute and tag names?

Is it possible to retrieve the original casing of an attribute name or tag name from the source? The attribute name is in lowercase The tag name is in uppercase The local element name is in lowercase I am looking for a solution that doesn't require ...

javascripthtmldom

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

I need help including an HTML page using ng-click within ng-repeat. However, it is currently loading all the content for every ng-repeat element. My specific requirement is to only bind(ng-include) the clicked element. Please see the attachment for m ...

javascriptjqueryangularjshtml

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The JSFiddle I currently have is not functioning as expected. When the user directly selects the end-date, it does not restrict the start-date in this particular fiddle. It should change once the user directly changes the end-date. The functionality works ...

javascriptjqueryhtmljquery-uidatepicker