Foundations of Bootstrap

I am a beginner with bootstrap and I am feeling overwhelmed by the grid system. It seems like understanding it is crucial for me to move forward.

Question 1: I'm struggling to figure out the equivalent class prefix for different devices in Bootstrap's grid system. For example, if I have col-md-6, what would be its equivalent for smaller devices - col-sm-X or col-xs-X? I find this confusing.

Question 2: While following a Bootstrap tutorial, I noticed that col-sm-10 was used in the stores-banners section, even though it only occupies 6 columns in a 960 grid. Shouldn't it be col-sm-6 instead? Please refer to the attached image for clarification.

In the image provided, I am specifically talking about the buttons area. https://i.sstatic.net/qgN4T.jpg

<div class="container top-description-app">
        <div class="row">
            <div class="col-sm-6 top-description-text">
                <h1>Hello</h1>
                <h3>We take mobile photography to a brand new level.</h3>
                <p>With our free app you can take amazing photos straight from your phone.</p>
                <div class="col-sm-10 stores-banners">
                    <a href="#" class="btn btn-success">Get the free app</a>
                    </br>
                    <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
                    <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
                </div>
            </div>
            <div class="col-sm-6 top-iphone-wrapper">                   
                <img src="img/iphone-header.png" alt="iPhone app">
            </div>
        </div>
    </div>

I would appreciate any help on these issues. Thank you in advance.

csstwitter-bootstrapresponsive-design

Answer №1

  1. Designing your website to be responsive across different screen sizes is essential.

In general, xs represents mobile, sm stands for tablets, md for desktops, and lg for larger desktop screens.

For instance:

p {
  height: 200px;
  margin-bottom: 20px;
  background: #ccc;
 }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-12"><p></p></div>
    <div class="col-sm-6 col-md-12"><p></p></div>
  </div>
</div>

This code specifies having: 1 column on mobile (xs), 2 columns on tablets (sm), and 1 column on both desktops (md) and large desktop screens (lg).

  1. The provided code may not work correctly. When nesting col- classes within another, a new row should be created.

<div class="container top-description-app">
  <div class="row">
    <div class="col-sm-6 top-description-text">
      <h1>Hello</h1>
      <h3>We elevate mobile photography.</h3>
      <p>Our app allows capturing stunning photos directly from your phone.</p>
      <div class="row">
        <div class="col-sm-10 stores-banners">
          <a href="#" class="btn btn-success">Get the free app</a>
          </br>
          <a href="#"><img src="img/apple-banner.png" alt="App Store"></a>
          <a href="#"><img src="img/google-banner.png" alt="Google Store"></a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 top-iphone-wrapper">
      <img src="img/iphone-header.png" alt="iPhone app">
    </div>
  </div>
</div>

This code implies that col-sm-10 is nested in the col-sm-6 class (occupying 10 out of 12 columns within it).

For example:

p {
  display: block;
  margin-bottom: 20px;
  background: #ccc;
  height: 150px;
}
span {
  background: #333;
  color: #fff;
  display: block;
  height: 100px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Column</p>
      <div class="row">
        <div class="col-sm-6">
          <span>Nested Column</span>
        </div>
        <div class="col-sm-6">
          <span>Another Nested Column</span>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <p>Column</p>
    </div>
  </div>
</div>

Answer №2

What is the equivalent of col-md-6?

There isn't exactly an equivalent because in Bootstrap, each grid divides your screen into 12 equal columns. There are four different screen sizes - large (lg), medium (md), small (sm), and extra-small (xs). Your column definition should be based on what you want to display to the user at that specific screen size.

To better understand this concept, check out this example and try resizing the screen to see the columns in action.

Let's explain with an example for your second question:

If you have a screen width of 1200px and you want a column with a width of 500px using the Bootstrap grid system, you need to make your box (screen) size 1000px and divide it in two. Here's how you do it:

<div class="col-lg-10">
    <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
    </div>
</div>

It's as simple as that :)

Answer №3

Utilizing a 12-column grid system, Bootstrap allows for nested grids within the layout.

In this particular scenario, the display is divided into two sections with col-sm-6, visible on devices exceeding the sm breakpoint (typically around 768px) while stacking on smaller screens.

The col-sm-10 element is contained within another col-sm-6, occupying 10/12th of its parent's width (half of the screen in this case).

To enhance this setup, I would recommend wrapping col-sm-10 in a <div class="row"> and including an empty 

<div class="col-sm-2"></div>
to complete the row. This configuration ensures proper spacing on different screen sizes.

If you intend to maintain consistent button width relative to the text above, consider utilizing col-xs-10 instead of col-sm-10 and col-sm-2; ensuring the divs remain inline without stacking regardless of screen size.

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

Pictures acting erratic following the implementation of two setTimeout functions

I encountered an issue while developing a pong game using html/css/javascript. Everything was going smoothly until I introduced a second setTimeout() function. Here is the snippet of my html code: <!DOCTYPE html> <html> <head> <scrip ...

javascripthtmlcss

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

javascriptphphtmljquerycss

Tips on ensuring that PRE elements expand to fit column size without growing when additional data is added

I am facing a design challenge where I have a main card (1) that contains two sub-cards (2 and 3) using Bootstrap columns. Sub-card number 2 adjusts its height dynamically based on the screen size, while sub-card number 3 consists of a code snippet element ...

csstwitter-bootstrapbootstrap-4pre

css - Tips for reducing the speed of inertia/momentum scrolling on mobile devices

I have been working on creating a scrollable card gallery using a CSS grid layout. The structure I am following is similar to this: <div class="gallery-wrapper"> <div class="gallery-container"> <div id="card-1" class="gallery-ca ...

htmlcssscroll

I cannot seem to get the image to display properly, it keeps getting cut off and

I am trying to add an image to my website: https://i.sstatic.net/giAdT.jpg However, when I try to do this, the full image is not showing: https://i.sstatic.net/VRBlB.png This is the code I am using: <!DOCTYPE html> <html lang="en"> ...

htmlcssbootstrap-4

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

htmlcss

Extracting the value of *data* from my HTML and displaying it in the console with Javascript

I'm struggling to figure out what's going wrong with this code. I've done some research online and it seems like I should just include the window.onload = function() at the beginning of my code. However, no matter what I try, the value alway ...

javascripthtmlcss

Issue with mouse movement causing inaccurate coordinates

Hello there! I am facing an issue with a small project I'm working on. My goal is to have an indicator appear whenever I hover my mouse over the fishing area, but it seems like the coordinates are off when using the mousemove event. You can check out ...

javascriptcssvue.jssassgsap

CSS animation displays on top as it runs

My issue involves animating 2 blinking eyes that appear on top of my navigation bar when I scroll the page. Surprisingly, this doesn't happen without the animation. How can I ensure that the animation runs smoothly under the navigation bar? I have tri ...

htmlcssvue.jspositioncss-animations

Align the tops of the tables

I currently have three tables in my HTML code. When all three tables are filled with data (10 rows each), they appear correctly aligned as shown in the first picture. However, if any of the tables do not have the maximum capacity of 10 rows reached, they ...

htmlcsshtml-table

`Unable to locate Dropdown Menu Element`

Currently, I am in the process of developing a website that utilizes a series of images as a navigation menu. While I managed to successfully implement a dropdown (slideout) menu on one side, the other side fails to display the menu upon mouseOver interact ...

htmlcssdrop-down-menuhoverdisplay

Why should we bother with adding additional div elements?

Can you identify the distinctions between these two pieces of code? How does it impact the structure if we add another nested div within the first one? <div class="blah"> <div class="blahInner> <img src="pony.jpg"> < ...

htmlcss

Guide to importing a JavaScript file into a different JavaScript file

I encountered an issue while trying to import a JavaScript file into my server-side JavaScript file. The function I need to run cannot be executed on the server side. Is there a method to successfully import my source code to the server-side JavaScript fil ...

javascripthtmljquerycssselenium-webdriver

Animated div or fieldset featuring a multi-step form

I have recently put together a detailed step-by-step guide. Each step is wrapped in its own "fieldset" within a single .html file. To navigate back and forth, I have incorporated javascript into the process. However, as time goes on, I am noticing that th ...

javascriptjqueryhtmlcss

Tips on utilizing radio buttons in place of check boxes

How can I create a dynamic menu with multiple categories and submenus that toggle open and close when clicked? I currently have a menu structure with "What's New" and "Categories", and within the "Categories" section, I have three main categories each ...

htmlcsslistcheckboxradio-button

How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using CSS: .noUi-horizontal .noUi-handle { width:8px; height:25px; left: 0px; top: -8px; border: 0px solid #000000; border-radius: 0px; background: #000; cursor: default; box- ...

javascriptcssnouislider

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

javascriptjquerycsshtml

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

jquerycssregexstring

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object ...

javascriptc#cssasp.netasp.net-mvc