logo
down
shadow

Bootstrap 4 grid issue


Bootstrap 4 grid issue

By : Giovany Ypaflores
Date : November 21 2020, 03:00 PM
To fix this issue It was difficult working with your supplied link since when I tried to run the HTML I would not get the same content. But upon manually putting in my own content and trying to recreated I found that using bootstraps ROW on a container div worked.
code :
<div class="row"> 
    <div class="col-sm-9">CONTENT</div>
    <div class="col-sm-3">SIDEBAR</div>
</div>


Share : facebook icon twitter icon
Grid issue with Bootstrap

Grid issue with Bootstrap


By : Winston
Date : March 29 2020, 07:55 AM
help you fix your problem Since bootstrap 3 the syntax changed: span does't exist now it's col-width_wanted-number_of_columns so for you something like this :
code :
<div class="row-fluid">
<div class="sidebar border col-xs-4" >
1
</div> <!-- sidebar end -->
<!-- content start -->
<div class="blogBody border col-xs-8">
2
</div> <!-- content end -->
</div><!-- main dev end -->
Bootstrap grid alignment issue in col-xs

Bootstrap grid alignment issue in col-xs


By : jaydip
Date : March 29 2020, 07:55 AM
This might help you I find it quite hard to understand what exactly you want, but some suggestions.
First of all don't touch Bootstrap's grid classes (e.g. the .more-pad and .padding-fix-left classes unless you absolutely need to. You'll likely break its behaviour.
code :
.btn-image {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  text-align: start;
}
.btn-image__text {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  color: white;
  font-size: 1.5em;
}
.btn-image:hover .btn-image__text {
  background-color: blue;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <div class="img-background">
          <img src="http://placehold.it/300/888888" class="img-responsive">
        </div>
        <div class="btn-image__text">
          <p>Hello!</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/666666" class="img-responsive">
        <div class="btn-image__text">
          <p>Hello</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/888888" class="img-responsive">
        <div class="btn-image__text">
          <p>Hello...</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3 text-center">
      <div class="btn-image">
        <img src="http://placehold.it/300/666666" class="img-responsive">
        <div class="btn-image__text">
          <p>uhm..hello?</p>
        </div>
      </div>
    </div>
  </div>
</div>
Bootstrap 3 grid alignment issue

Bootstrap 3 grid alignment issue


By : user3049177
Date : March 29 2020, 07:55 AM
I wish this helpful for you As a matter of fact you're doing it wrong. It's just a coincidence you have it running, but in other scenarios it won't, and you'll have other issues like aligning, etc.
Your problem is that you're nesting col.... inside col.... when you actually need to use .row --> .col-...-x (where x is a number and the sum of all those digits plus any offset you have must be 12).
code :
<div class="col-md-2 text-center"> <a href="#" class="btn btn-default btn-circle">
    <span>important <br/>dates</span>
    </a>
</div>
.btn-circle {
    position:relative;
    text-align:center
}
.btn-circle span {
    position:absolute;
    top: 50%;
    left:50%;
    transform: translateY(-50%) translateX(-50%);
}
Bootstrap 4 grid issue with div tag

Bootstrap 4 grid issue with div tag


By : Hunter
Date : March 29 2020, 07:55 AM
seems to work fine If you must keep the outer divProvinces make it a col-md-6, and then nest the right side columns...
code :
<div class="container mt-3">
    <div class="row">
        <div class="col-md-2">
            <label>Country <span class="required-span"> * </span></label>
        </div>
        <div class="col-md-4">
            <select class="form-control valid" data-val="true" id="Country" name="Country" style="color:black">
                <option value="">----Select----</option>
                <option value="22" data-abbreviation="BELG" data-province="True">Belgium</option>
            </select>
            <span class="field-validation-valid text-danger" data-valmsg-for="Country" data-valmsg-replace="false" style="display:none">Country is required.</span>
        </div>
        <div id="divProvinces" style="" class="col-md-6">
            <div class="row">
                <div class="col-md-4">
                    <label>Provinces<span class="required-span"> * </span></label>
                </div>
                <div class="col-md-8">
                    <select class="form-control" id="District" name="District" style="color:gray;font-style:italic;font-size: 14px;">
                        <option value="">--Select--</option>
                        <option value="1">Antwerp</option>
                    </select>
                    <span class="field-validation-valid text-danger" data-valmsg-for="District" data-valmsg-replace="false" style="display:none">Provinces is required.</span>
                </div>
            </div>
        </div>
    </div>
</div>
Bootstrap grid issue

Bootstrap grid issue


By : Daisuke Kimura
Date : March 29 2020, 07:55 AM
Hope this helps Adding padding to the box holding the col-md-4 will overwrite Bootstraps' default gutter padding and hence removing the spacing between columns.
The two options are to add padding to an inner element, than where the col-md-4s are placed.
Related Posts Related Posts :
  • Can anyone see where I'm going wrong with this srcset?
  • Why is this SVG so blurry?
  • Dynamic multiple charts in chart.js with dynamic data inside them
  • How to set equal amount of spacing from the font awesome icon or text using css
  • Empty input shown as brackets when using RenderControl ASP.NET VB HTML
  • Bootstrap - section and div positioning
  • Easy HTML button "border"
  • Jumping background
  • align icon on top of text inside button tag
  • Working with local language in HTML
  • Mobile responsive design--> Img-responsive not working
  • Display a fix number of row item depending on screen size using bootstrap
  • EditorConfig for VS Code not working
  • Make second image 50% smaller than first with CSS
  • CSS Align logo same height as text
  • How can I write this layout with flexbox?
  • Truncating an individual block of text within a list item
  • Making Wordpress Site 100% Browser Width
  • Move links within a navbar
  • Float div left and button right
  • Vertically and horizontally centering two items within a parent div that is part of a flex-row
  • Why images and text with links keep moving on hover
  • How do I make different buttons in css?
  • Input border effecting the position of span why?
  • bootstrap.min.css X in top right corner
  • Why can browsers infer certain omitted HTML elements, but not all omitted elements required to form valid markup?
  • Strange behaviour involving Closure commands and "text-align:justify"
  • Using html, css to create a google search page look alike
  • Get button to hover over image
  • flexbox prevent wrapping of rows
  • How to use CSS to give a circle a "partial border"
  • Float left vs float right - why does the order change?
  • css vertical align not working correctly
  • Eliminate margin when commenting
  • CSS Properties rules are not working in HTML file
  • Position footer div at bottom inside table-cell with 100% width
  • How to align one element to bottom and other one to top in bootstrap 4
  • Using Bootstrap, how do I center my navigation bar?
  • VBA Excel Content into HTML (create an HTML file from Excel)
  • minimum height of div and contents at least 100%
  • Absolute position div goes out of window when opening console
  • Make my background-image in the middle
  • Bootstrap col-sm-6 icons alignment
  • Nav bar won't stay in header when made smaller. How can I achieve this?
  • How to right align a hyperlink in a <div>?
  • Links with tables doesn't quite work
  • How to make <tr>'s height of position:fixed column follow its content's height?
  • Is an empty meta refresh tag ignored or equivalent to 0?
  • CSS How can I make this height responsive?
  • DIV moves when it has children elements
  • How to set first table column as bold (CSS)
  • Bootstrap Fieldset Legend is getting Covered by Panel Panel-default completely
  • Blogspot remove black line above posts
  • Usage of picture tag for svg types
  • Angular 4 toggle fontawesome button inside ngFor
  • CSS code not working on one single page
  • Place footer on bottom page while printing
  • Google maps API doesn't change language
  • Fade out previous :target after :target changed
  • Display flex, make image same height with another columns
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org