logo
down
shadow

Have border on inside of bootstrap columns only


Have border on inside of bootstrap columns only

By : saleem tahir
Date : November 19 2020, 01:01 AM
it helps some times if you want to have less class names and be able to use it for more than 4 items you can use this.
code :
#skills .border:not(:first-child){
    border-left: 1px solid #ddd;
}
@media (max-width: 992px){
    #skills .border:nth-child(odd){
        border-left: none;
    }
    #skills .border:nth-child(n+3){
        border-top: 1px solid #ddd;
    }
}
<div id="skills" class="row">
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-terminal"></i>
        <br>
        Linux
    </div>
    <div class="col-md-3 col-xs-6 border" >
        <i class="fa fa-html5"></i>
        <br>
        HTML5
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-cogs"></i>
        <br>
        Teamwork
    </div>
    <div class="col-md-3 col-xs-6 border">
        <i class="fa fa-bullhorn"></i>
        <br>
        Communication
    </div>
</div>


Share : facebook icon twitter icon
Bootstrap v 3.2 Border across multiple columns

Bootstrap v 3.2 Border across multiple columns


By : Nopi
Date : March 29 2020, 07:55 AM
like below fixes the issue Please check this plunk. I've wrapped the content inside
with a

tag and then applied a border-top to that

tag. Moreover, I've assigned the property of display: block to the tag inside

Border and background inside of padding margin, with Bootstrap columns

Border and background inside of padding margin, with Bootstrap columns


By : Ajinkya Shelar
Date : March 29 2020, 07:55 AM
Hope that helps Ended up wrapping the repeat's contents inside another div, and only keeping the padding on the outer.
space between 3 columns with border in bootstrap

space between 3 columns with border in bootstrap


By : CyberBob909
Date : March 29 2020, 07:55 AM
Any of those help Instead of using col-*-4, you should use col-*-3 as it won't span the entire width. Plus I added the following CSS:
code :
.col-xs-3:not(:first-child) {
    margin-left: 12%;
}
Border in row and columns of bootstrap divs

Border in row and columns of bootstrap divs


By : Christopher
Date : March 29 2020, 07:55 AM
hop of those help? you may wanna use padding instead of margin in cells and use flex box to flex the div cells together
code :
.top5 {
  margin-top: 50px;
}

.row {
  border: 1px solid;
}

.row + .row {
  border-top: 0;
}

.flx {
  display: flex;
}

.inner {
  background: aliceblue;
  border-right: 1px solid blue;
  padding: 10px 15px;
}

.inner-end {
  background: aliceblue;
  padding: 10px 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container top5">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="row">
        <div class="flx">


          <div class="col-md-3 col-xs-3 inner">
            <div><b>Type</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <div class=""><b>SMS</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <div class=""><b>Email</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner-end">
            <div class=""><b>Business Unit</b></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 col-xs-12">
      <div class="row border-between">
        <div class="flx">
          <div class="col-md-3 col-xs-3 inner">
            <span>Another tesing text</span>
            <div>1</div>
            <div>2</div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <span> test</span>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <span>Random text</span>
          </div>
          <div class="col-md-3 col-xs-3 inner-end">
            <span>Random text</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
bootstrap grid with border between columns

bootstrap grid with border between columns


By : pavol.barci
Date : March 29 2020, 07:55 AM
To fix this issue An universal solution would be to use flexbox.
This will allow your columns to have always equal height.
Related Posts Related Posts :
  • AMP carousel direction change
  • Bootstrap multiple carousel not working on thumbnails click
  • Is there a way to put a permanent space into an input field?
  • Html boxes not displaying properly
  • How can I change a variable in Jekyll _config.yml dynamically?
  • How can I prevent DIVs from overlapping a right floated image?
  • Eclipse and .tml files highlighting not working
  • Footer is not in the bottom of the window, (phonegap jquery mobile app for windows mobile)
  • How to put div over another
  • How to use glyphicons in bootstrap 3.0
  • Wordpress page links not working
  • How Do I Use CSS to Set the Color of An ALink?
  • Webpage doesn't scroll smoothly on screen
  • YouTube iframe, browser looks for file locally
  • html displaying inline image
  • Font acting differently on IE and Firefox
  • Encoding and decoding of the character references
  • An Image Button navigate to another site html/css
  • IE8 "Save Target as ..." won't display for block elements
  • Image hover transition for span - CSS
  • How to apply min and max on textarea?
  • How to draw multiple horizontal lines (Notebook Paper effect) using css?
  • Table Printing Issue: Gaps in top and Bottom Border of th Elements
  • grouping elements with div and applying stylesheet for that group
  • Click <div> to expand, then click again to shrink - Its expanding, just not shrinking
  • CSS - How can I center a <script>'s output?
  • Django's template variable gets interpreted as HTML
  • ngx datatable vertical scroll with rowheight set to auto
  • How to make input text border with CSS when it's OnFocus
  • Anyone know of a calendar web widget for my website I could use?
  • How does Bootstrap manage to use fixed positioning for navbar on iOS?
  • Centered text in fully clickable table cell
  • Compare HTML and HTML5
  • steps of creating webpage in bangla
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org