Exciting Findings of Grid in Bootstrap 4 Alpha-6

I recently switched to using the latest alpha4 6 version and decided to see what has changed.

It seems that I can now use containers, rows, and columns just like in version 3.

So, I set up a very basic layout - content > row > col (using col as a container for additional setup), with a row inside it and two columns. The outcome was not great: https://jsfiddle.net/34prcdou/1/

I read that they transitioned from using floats to flexbox, which is fine as I am familiar with flexbox, but the result surprised me. I believe this is a valid bootstrap layout.

What could I be missing here? Perhaps I am too fatigued to see the bigger picture...

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12" id="content">
      <div class="row">
        <div class="col-sm-6 color-1" style="height: 100%">a</div>
        <div class="col-sm-6 color-2" style="height: 100%">a</div>
      </div>
    </div>
  </div>
</div>

CSS

html {height: 100%;}
body {height: 100%;}

.container:first-child {margin: 0 auto; height: 100%;}
.container:first-child {
    -webkit-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
}

#content {border: 1px solid #f00}

.color-1 {background: #CEE5F2}
.color-2 {background: #ACCBE1}
.color-3 {background: #7C98B3}
.color-4 {background: #637081}
.color-5 {background: #536B78}

Answer №1

In the latest version of Bootstrap 4 Alpha 6, the -xs- prefix has been eliminated. To create a full-width column, use col-12 instead of col-xs-12

<div class="container">
  <div class="row">
    <div class="col-12" id="content">
      <div class="row">
        <div class="col-sm-6 color-1" style="height: 100%">a</div>
        <div class="col-sm-6 color-2" style="height: 100%">a</div>
      </div>
    </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

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

Ways to establish the gradient

Here is the code snippet I am currently working with. .imgcol1 { background-image: url(https://picsum.photos/200/300); background-repeat: no-repeat; background-size: cover; height: 190px; width: 520px; } .col1 { margin: 75px; } .grad { b ...

Troubleshooting the malfunctioning Bootstrap Dropdown Navbar in Rails 6

I am currently integrating Bootstrap with a Rails 6 application. I utilized yarn to install jquery and popper.js. Despite including a dropdown in my navbar, it fails to open and instead just redirects me to the current link with an added #, which serves no ...

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

CSS styles are missing in ASP.Net MVC4 while debugging in Visual Studio 2012

While troubleshooting my website, I noticed that the CSS is not displaying. I am encountering an Error 500 on the Site.css file when inspecting it in Firefox. My _Layout.cshtml is configured to utilize the CSS files. @Styles.Render("~/Content/css") I h ...

Checking the Length using JQuery

My dilemma is with a text field (datepicker) - I want the button to change color when someone selects a date, but it's not working. Can you please assist me? HTML <input type="text" id="datepicker"> <button type="button" onclick="" class=" ...

The uniform height of flex columns was spoiled by a child element with a display setting of flex

CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; background-color: #F5F5F5; } body > header { display: flex; position: fixed; width: 100%; height: 60px; align-items: center; background-color: #373737 ...

The width of DIVs in Mac Safari exceeds that of other browsers

Encountering an issue that is specific to MAC Safari. Here's the code snippet: <div class="wrapper" style="max-width:1220px"> <div style="width:50%;display:inline-block">First</div> <div style="width:25%;display:inline-block"&g ...

Vue.js transition-group does not apply the *-move class

As I dive into learning Vue, I find myself wondering if I may have overlooked something fundamental or stumbled upon a bug. Despite multiple readings of the documentation at https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions, I still can& ...

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

Are the elements in Chrome overlapping due to the box model?

I'm currently experiencing a problem of cross-browser compatibility between Chrome and Firefox. Upon inspecting the webpage in Chrome, it's evident that the box for the #content DIV is overlapping with the box for the H3. When viewed in Firefox ...

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

How can I customize the color of the title and property value in Handlebars?

Here is the list I am working with: <li>Equipment Area:{{equipment_area}}</li> <li>Equipment Type: {{equipment_type}}</li> <li>Manufacturer: {{manufacturer}}</li> <li>Model Number: {{model_number}}</li> < ...

How can I eliminate the border appearance from a textfield fieldset component in Material-UI?

I have been struggling to remove the border using CSS code I found on Stack Overflow, but unfortunately, the issue persists. If anyone could kindly assist me in fixing this problem, I would be extremely grateful. Can someone please advise me on the specif ...

Css animations not functioning properly in Chrome

I've been working on this animation project, here is the link: http://codepen.io/Zeaklous/pen/dIomg It seems to work perfectly fine on Firefox but not on Chrome. Here is the code snippet: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/ ...

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

Creating customizable divider lines with text next to them using HTML in emails

How can I create an adjustable line with a word next to it, ensuring that long words do not wrap onto a second line? I want the line to stay on one line and the left side to shrink accordingly. Also, I need the text input area to be flexible so I can input ...