Rowing and Columning with Bootstrap

Hey there! I'm currently working on creating some stylish boxes to showcase text and possibly an image background. However, I'm encountering an issue where the boxes are not aligning correctly on smaller screens.

https://i.sstatic.net/JoYtj.jpg

I've experimented with various solutions, but I can't seem to get the text to align at the bottom without disrupting the overall alignment of the boxes.

CSS:

.bigbox {
 text-align: center;
  padding: 80px 40px;
}
.bigbox .bigbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}

.bigbox .bigbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
.smallbox {
 text-align: center;
  padding: 80px 40px;
}
.smallbox.smallbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}
.smallbox.smallbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}

HTML

  <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-sm-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 1</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>
htmlcss

Answer №1

The key to achieving this layout is the use of display:flex on the parent div. By utilizing this property, the two child divs are forced to have the same height.

To create the desired visual effect, I removed the padding from the second div to bring it closer to the larger box. Additionally, I absolutely positioned the title of the big box at the bottom of the div.

I made some adjustments to the padding for styling purposes but haven't completely replicated the image provided.

.row {
  display:flex;
}
.bg-color-base {
  background:red;
}
.bg-color-base + div{
  padding:0;
}
.bg-color-purple {
  background:purple;
}
.bg-color-purple-dark {
  background:blue;
}
.bigbox {
 text-align: center;
  padding: 40px;
  position:absolute;
  bottom:0;
}
.bigbox .bigbox-title {

  align-self: flex-end;
  text-align: left;
  font-size: 28px;
  color: #fff;
}

.bigbox .bigbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
.smallbox {
 text-align: center;
  padding: 160px 40px 10px;
}
.smallbox.smallbox-title {

  text-align: left;
  font-size: 28px;
  color: #fff;
}
.smallbox.smallbox-text {
  text-align: left;
  font-size: 18px;
  color: #fff;
  opacity: .85;
  margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="full-width-container">
        <div class="row no-space-row ">
            <div class="col-xs-6 bg-color-base">
                <div class="bigbox ">
                    <h2 class="bigbox-title">BOX 1</h2>
                    <p class="bigbox-text">DESCRIPTION</p>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="smallbox bg-color-purple ">
                    <h2 class="smallbox-title">BOX 2</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>
                 <div class="smallbox bg-color-purple-dark ">
                    <h2 class="smallbox-title">BOX 3</h2>
                    <p class="smallbox-text">DESCRIPTION</p>
                </div>  
            </div>
        </div>
    </div>

Answer №2

Check out this solution. The content is enclosed in a div with absolute positioning.

http://example.com/solution123

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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 process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected. HTML: <div class="container-c ...

htmlcsslinear-gradients

Instructions on how to insert the meta tag with the attribute "http-equiv" set to "REFRESH" and the content "0; URL="somedomain"" into a division on a

Trying to send an ajax request to a page that includes the following meta tag: <meta http-equiv="REFRESH" content="0; URL=https://www.ohterDomain.com/help?nodeId=2&view=content-only"> After making a successful ajax call, the correct content is ...

javascriptjqueryhtmlajax

Add the bootstrap class to the element only when the screen size meets certain criteria

Is there a method to add a CSS class to an HTML element solely at specific screen size while utilizing bootstrap? An instance would be to implement table-sm to <table> when the viewport is smaller than md size. At present, I have two separate table ...

cssbootstrap-4

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

What is the best way to preload a font with a hashed filename and style hosted on a CDN?

Is there a way to preload the Material Icons font in advance? <link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2" as="font" type="font/woff2" crossorigin=&q ...

htmlcssfont-facecdnwebfonts

Choose tag using position in a sequence

I am working on updating the label text "E-mail" to say "User Name" in this HTML markup. The only tool I have access to for this task is jQuery. <div class="foo" style="border:1px solid #444"> <span class="field-with-fancyplaceholde ...

jquerycssjquery-selectors

If I choose a different option from the dropdown list, I would like a textbox to appear

Hey there, I have a list of industries and one of the options is "Other". When a user clicks on "Other", a text box should appear for them to specify. I'm struggling to make this work using Django AJAX. Any help would be appreciated! <div class ...

htmldjango

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp

What is the best way to place a child on top of a different parent in the stack?

There is a collection of figure tags, each with an expandable figcaption. Inside each figure, there is a clickable div that reveals the figcaption when clicked. However, the visible figcaption only overlaps the figure it belongs to and not others. Is there ...

jqueryhtmlcss

Require a date picker in Vuetify, prohibiting any kind of text input

I am working with vuetify to create a date picker for capturing a user's birthday. I need the date picker to be a required field in my form and only accept date values. Here is what I have attempted: <v-flex xs12> <v-menu ref="menu" ...

htmlvue.jsdatepickervuetify.js

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

javascriptjqueryhtmlcss

Should position: absolute; be utilized in asp.net development?

I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...

htmlcss

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

htmlnsattributedstring

Magnific Popup displaying only the initial item

As someone new to using jQuery and Magnific Popup, I am working on a grid of images. When an image is clicked, I want Magnific Popup to display a specific div containing information relevant to that particular image. <div class="grid"> <div c ...

javascriptjqueryhtmlmagnific-popup

Is it possible to access an external website by clicking on a link within a DIV element?

I have a basic website set up like this sample.php <html> <head></head> <body> <a id="myLink" href="http://sample.com">Click!</a> </body> </html> I displayed this website within a DIV-Container on a ...

javascriptphpjqueryhtmlcss

Placing the error message for validation in its appropriate position

My login form has a layout that looks like this: https://i.stack.imgur.com/i7rCj.png If I enter incorrect information, it displays like this: https://i.stack.imgur.com/ItNJn.png The issue is that when the error message appears, it causes the login form ...

phphtmlcssformsauthentication

Create a jQuery animation that mimics the Safari home page experience. Create a

Is there a way to achieve a similar effect as Safari's new tab using HTML5 canvas instead of CSS3 3d transform? While we can create a similar transformation with CSS3 3D transform, it is limited to Webkit browsers. Can we use CANVAS to replicate this ...

jqueryhtmlcsscanvas

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

javascriptjqueryasp.netcsstabs