logo
down
shadow

Bootstrap 3 Grid Layout not respecting blank "Margin" columns?


Bootstrap 3 Grid Layout not respecting blank "Margin" columns?

By : subith s.v
Date : November 22 2020, 02:59 PM
hope this fix your issue Added a height to the margin class and also added the missing margin after text 2 (center) block
code :
.margin {
  height: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid PageView text-center">
  <div class="row Page2">
    <div class="col-sm-2 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-bullhorn glyphicon-bordered"></span>
      </div>

    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-ok glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2 col-xs-2">
      <div class="glyphicon-ring"> <span class="glyphicon glyphicon-phone glyphicon-bordered"></span>

      </div>
    </div>
    <div class="col-sm-2 margin"></div>
    <div class="col-sm-2 margin"></div>

    <div class="col-sm-2">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>Title 1</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight1">
            <p class="lead">Text 1</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>Title 2</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight2">
            <p class="lead">Text 2</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-1 margin"></div>
    <div class="col-sm-2">
      <div class="box">
        <div class="row">
          <div class="col-xs-6 col-sm-12">
            <h2><strong>Title 3</strong></h2>
          </div>
          <div class="col-xs-6 col-sm-12 eqheight3">
            <p class="lead">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


Share : facebook icon twitter icon
grid: How to force sizes of grid.layout when unit is "npc" instead of "inch"?

grid: How to force sizes of grid.layout when unit is "npc" instead of "inch"?


By : Richard LoNigro
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Use grid.show.layout(gl, vp=viewport(width=1.25, height=1.25)) and it works.
"Pivoting" a layout with Bootstrap 3 fluid grid

"Pivoting" a layout with Bootstrap 3 fluid grid


By : rui dan
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Assuming I didn't miss anything, this matches your two layouts specified:
code :
<div class='row'>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>3.1</div>
        <div class='col-xs-6 col-sm-12'>3.2</div>
    </div>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>2.1</div>
        <div class='col-xs-6 col-sm-12'>2.2</div>
    </div>
    <div class='col-xs-12 col-sm-4 pull-right'>
        <div class='col-xs-6 col-sm-12'>1.1</div>
        <div class='col-xs-6 col-sm-12'>1.2</div>
    </div>
</div>
Why is Bootstrap not respecting my grid layout?

Why is Bootstrap not respecting my grid layout?


By : Akasha
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , The easiest way to get it working how you want it, based on your current code, would be to get rid of all of the rows and only use one row containing each event and then add a col-md-6 class to each event:
code :
<!--Event 1-->
<div class="div-event col-md-6">
  <span class="date-event col-xs-2 col-sm-2 col-md-1 col-lg-1"><span class="num-date-event">22</span>    <br>SEP</span>

  <button class="btn btn-event btn-block col-xs-8 col-sm-8 col-md-4 col-lg-4" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Katy's Super Party<br>at her house</button>

  <span class="glyphicon glyphicon-gift icon-event col-xs-2 col-sm-2 col-md-1 col-lg-1" aria-     hidden="true"><span class="text-event"><br>PARTY</span></span>

  <div class="collapse" id="collapse-1"> 
    <div class="well">
    ...
    </div>
  </div>
  <div class="clearfix"></div>
</div>
Advanced CSS Tricks: How to align text paragraphs to a "baseline grid" using multiple columns layout?

Advanced CSS Tricks: How to align text paragraphs to a "baseline grid" using multiple columns layout?


By : Florin COJOCARU
Date : March 29 2020, 07:55 AM
hope this fix your issue Could be a little late for an answer, but nonetheless. By removing the default margin, the alignment of lines behaves like you want:
code :
p {
  margin:0;
}
"angular-flex-layout" not adding margin for "mat-form-fields" on mobile screens

"angular-flex-layout" not adding margin for "mat-form-fields" on mobile screens


By : Yifang Cao
Date : March 29 2020, 07:55 AM
Any of those help easiest and most convenient would be to set ngClass.xs on flex container
code :
<div class="container" fxLayout="row" fxLayout.xs="column" 
     fxLayoutGap.gt-xs="2%"  fxLayoutAlign="center" ngClass.xs="mobileContainer">
.mobileContainer mat-form-field {
  margin: 8px 16px;
}
Related Posts Related Posts :
  • Center the text in a row of an HTML table
  • SVG in Jekyll not showing in browser, but code is
  • Polymer 1.x: How to data bind to a variable boolean attribute?
  • scrolling an element on top of a fixed element
  • Link to pages/home not rendering the way I expect
  • Using Bootstrap's model, .modal-header and .modal-footer not working
  • How can I SIMPLY Toggle/Hide a Menu from sub-menu in AngularJS
  • Using CSS with Bootstrap framework
  • How do I get a html5 file input to accept only certain file types consistently across browsers?
  • Jumbotron BG image resizeable, wont show up
  • Resize images to fit display:flex divs
  • Three layers transparency
  • HTML side by side divs, while one has fixed width and the second one fits remaining space
  • DIV Stacking & Spacing Using CSS
  • How to make space between menu items in CSS/HTML
  • CSS display:flex equal parts
  • Image Caption Hover Animation in html or/and css
  • How can I create an alignment toward the top left corner?
  • Page is showing two scrollbars
  • Z-index issues - How to bring a child element onto the parent's below element?
  • Ingesting videos via bulk uploading into Azure media services from HTML5
  • border-radius with dropdown menu
  • Is there an HTML entity for an info icon?
  • Style two html form text area/inputs on same page differently
  • HTML tag with different attributes
  • CSS Clear depending on odd of even amount of items
  • Center div on wrapping (when it doesn't fit on the line)
  • How to remove blank space around SVG
  • Vertical Align Bootstrap Radio Button Image
  • Bootstrap HTML carriage return
  • CSS Checkbox Styling Behaving Differently on Other Pages
  • How to keep a link disable when it's still on the same page
  • Container div overlapping child horizontally
  • How to set both a background colour and a different text color on the same element
  • How to vertically & horizontally center children elements in a fluid layout set by media queries?
  • Layer responsive images on top of each other with Bootstrap
  • Is there a way to hide html inside curly braces in an ASP.NET MVC Razor html helper?
  • Show variable content in bootstrap tooltip
  • How to reference to WIN32 object under MS Windows 7 64bit in VBScript
  • Center inline-block list
  • Background image isn't showing up. Why?
  • CSS Click after transform
  • CSS Button Animation - How to Accomplish?
  • How to find out which favicon a browser actually uses
  • CSS Media Queries Overriding Each other
  • Cycle2 Carousel not working when it's in a DIV
  • HTML to landscape MS Word
  • Reduce the background simultaneously as site reduction - Bootstrap
  • How to set vertical align of elements that exist into a div tag to center with css?
  • I'm resizing an image while scrolling in my website, but i cant figure how to make an animation for the resizing
  • How to style up a hr tag
  • vertical scrolling blocked by Hammer.js
  • Site layout breaks on mobile view
  • I'm missing something in my Head to make the site responsive
  • Fluid/fixed design with sidebar composed of two items
  • Squeeze a div between two other divs when window resizes
  • Short form for expression <label>
  • Align :before with text both with same height
  • Handlebars not populating data after first space in input field
  • CSS3 sprite animation for different size
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co