Exploring the world of using Bootstrap containers, rows, and columns

I have a good grasp on containers and columns, but I am a bit confused about rows. The example below shows a 50/50 split.

 <div class="container">
    <div class="row">
       <div class="col-md-6">
          50 / 50 Content
       </div>
       <div class="col-md-6">
          50 / 50 Content
       </div>
    </div>
 </div>

If I want to further split one of these columns into sections, do I need to add another row as shown below?

 <div class="container">
     <div class="row">
        <div class="col-md-6">
           50 / 50 Content
           <div class="row">
              <div class="col-md-6">
                 Sub 50 / 50 Content
              </div>
              <div class="col-md-6">
                 Sub 50 / 50 Content
              </div>
           </div>
        </div>
        <div class="col-md-6">
           50 / 50 Content
        </div>
    </div>
 </div>

Any insights on this would be greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

When you enclose a div with the row class in other divs, the paddings, margins, and float settings will be affected.

Remember to use both on the same page and pay attention to these details.

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

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

Tips for creating a textfield with height that responds dynamically in Material UI

I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...

cssreactjsmaterial-ui

Dynamic Divider for Side-by-Side Menu - with a unique spin

I recently came across a question about creating responsive separators for horizontal lists on Stack Overflow While attempting to implement this, I encountered some challenges. document.onkeydown = function(event) { var actionBox = document.getElementB ...

javascripthtmlcss

Changing the color of buttons within the anchor and menu-separator classes in WordPress

https://i.sstatic.net/lYs6O.png Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? ...

htmlcsswordpress

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

css

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any

I am facing an issue with a PHP page that contains a lot of data and functions, causing it to take around 12 seconds to load whenever I navigate to that specific page. To alert the user about the loading time, I added the following code snippet. However, ...

javascripthtml

Creating a responsive 'media object' in Bootstrap 4: Tips and tricks

I have a media object that displays an image with text next to it, and it looks good on larger screens. However, when I switch to a smaller screen, the text overflows and the images appear in different sizes and positions. <div class="container&quo ...

htmlcssbootstrap-4media-queries

Modifying the Vue page background directly from a page: a step-by-step guide

UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...

cssvue.jsvuejs3

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

cssbootstrap-4

disable input box stationary

Is there a way to make a checkbox stay disabled even after refreshing the page? Currently, when I click the checkbox it disables, but upon refreshing the page, it goes back to being enabled. $( "input[type='checkbox']").click(function(event){ ...

javascriptjqueryhtml

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

When the form is submitted, I am unable to record the checkbox value

Hi, I have a question regarding submitting a form to the "/delete" route when a checkbox is checked. Although I am able to submit the form successfully, I am facing an issue retrieving the checkbox value that I assigned using ejs. Below are the relevant co ...

javascripthtmlnode.jsexpressejs

How do I utilize AJAX and HTML to invoke a RESTful web service in Java?

How to call a RESTful webservice in Java using HTML Ajax? I have created a simple webservice in Java and want to POST data into a database using HTML Ajax by calling a Java webservice in Eclipse. However, I encountered an error in my Java program. How can ...

javahtmlajax

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

javascriptjqueryhtml

Scrolling vertically without the appearance of a scrollbar

I've searched all over the internet for a solution to my problem, but nothing seems to work for me. I want to keep vertical scrolling ability while hiding the scrollbar from view in the y direction all the time. The challenge is to make my #content-m ...

javascriptjqueryhtmlcss

What is the best way to implement a slide-down animation on a stateless component in React JS using either ReactCSStransitionGroup or ReactTransition

I am looking to create an animation for a stateless component that starts off with display:none, and then becomes visible when the parent component's state changes. I want it to slide down like a dropdown menu effect. I am new to animations and have b ...

javascriptcssreactjscss-transitionsreact-transition-group

Two scenarios for tag class and just class are considered in this discussion

FOUND THE SOLUTION. Sending a huge shoutout to @JHeth and @Marko Vucurovic for their invaluable help! This query may seem lengthy, but the concept is straightforward. Let's break it down into 2 scenarios: Scenario I <html> <head><titl ...

htmlcss

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Issue with applying className to ToggleButton component in React with Material-UI

When utilizing React and Material UI, my goal is to efficiently apply styles to a group of ToggleButtons. At the moment, I am only able to specify the style prop for each individual ToggleButton in order to achieve the desired styling. I am attempting to ...

cssreactjsmaterial-uiclassname

Servlet-enhanced Turn-Based Gaming Experience

I am working on developing a turn-based game, similar to Checkers, using Servlets and JSP pages. I have set up a specific page with a newGame button that redirects players to the gamePage. This redirect sends one player to Black.jsp and the other to Red.js ...

htmljspservlets