how to achieve the following using bootstrap:
Desktop View
[col-md-9(number 1)][col-md-3(number 3)]
[col-md-12(number 2)]
Mobile view
[col-xs-12(number 1)]
[col-xs-12(number 2)]
[col-xs-12(number 3)]
thanks in advance
in this case you not use the col pull and col push . You use visible and hidden class.
<div class="row visible-xs visible-sm">
<div class="col-xs-12" style="background-color:red">1</div>
<div class="col-xs-12" style="background-color:blue">2</div>
<div class="col-xs-12" style="background-color:green">3</div>
</div>
<div class="row visible-md visible-lg">
<div class="col-xs-9" style="background-color:red">1</div>
<div class="col-xs-3" style="background-color:green">3</div>
<div class="col-xs-12" style="background-color:blue">2</div>
</div>
div {
color: #fff;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-md-6" style="background-color:red">1</div>
<div class="col-xs-12 col-md-6 hidden-xs hiddem-sm" style="background-color:green">3 (visible in desktop and above)</div>
<div class="col-xs-12 col-md-12" style="background-color:blue">2</div>
<div class="col-xs-12 col-md-6 visible-xs visible-sm" style="background-color:green">3 (visible in tabs and mobile)</div>
</div>
You can't directly achieve that order, for atleast one case, you'll need to replicate your content and toggle its visible in Desktop or mobile view.
Related
I am facing a problem with the Bootstrap-4 grid system. There are 12 columns, and whenever I use less than 12 columns, the rows are automatically centered. I want left alignment, how can this be fixed?
A snippet of my code:
<div class="row justify-content-start con-flex">
<?php foreach($books as $book):?>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div id="single-book">
<div id="book-image">
<?php print '<img src = "'.strip_tags($book->book_image).'" alt = "">';?>
<div id="addto-cart"><i class="fas fa-shopping-cart"></i> Add to cart</div>
</div>
<div class="book-text">
<div id="book-name"><?= substr(htmlentities($book->book_name),0,21) ?></div>
<div id="author">By <i><?= htmlentities($book->author) ?></i></div>
<div id="price"><?= htmlentities($book->price) ?>.TK</div>
<div id="book-details">
<?php print 'View details'; ?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
image of code:
enter image description here
According to Bootstrap doc that should solve your problem
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
content here...
</div>
<div class="col-4">
content here...
</div>
</div>
</div>
The code you have should be working fine, columns will be aligned left by default; maybe what you are seeing is the result of using .container instead of .container-fluid which uses the full width of the viewport. It's either this or you might have some custom CSS that's affecting the layout of the columns
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
<div class="container-fluid">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
This problem was for my other base CSS.
Instead of:
*{
margin: 0 auto;
}
For this margin: 0 auto; in my main style.css file My bootstrap's grids were not working properly. Now I remove this margin: 0 auto from *.
Now
I write
* {
margin: 0;
padding: 0;
}
Now my bootstrap grids are working properly
I have two rows which contain 3 column each , I would like at certain breakpoint to switch from 3 columns to 2 column and from 2 columns to 1 column (mobile breakpoint). so far this is what I have.
#media (min-width:768px) {
.col-md-4{
min-width: 50%;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
<div class="row" >
<div class="col-md-4">4</div>
<div class="col-md-4">5</div>
<div class="col-md-4">6</div>
</div>
Question
This does not work , what am I missing in my code? help am newbie though
I would place them all in the same .row and use the appropriate grid classes. This should get you what you want:
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
Note: I would not redefine .col-md-4 or any of the Bootstrap built-in grid glasses like that.
For more details, read the Bootstrap documentation on using grid glasses: https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Just use the different breakpoint column classes of bootstrap.
If you want to change order in bootstrap 3 (as requested in comments) you can easily use push and pull.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6">1</div>
<div class="col-md-4 col-md-pull-4 col-sm-6 col-sm-pull-6">2</div>
<div class="col-md-4 col-sm-6">3</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match
Use col-sm-6 to set 2 divs in 1 row on sm size...
(the calc is: 12/6=2 => 100% /2=50% means each div gets 50% to his width)
By default in xs size's screen will set 1 div in 1 row because you did not specify otherwise...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">1</div>
<div class="col-sm-6 col-md-4">2</div>
<div class="col-sm-6 col-md-4">3</div>
</div>
<div class="row" >
<div class="col-sm-6 col-md-4">4</div>
<div class="col-sm-6 col-md-4">5</div>
<div class="col-sm-6 col-md-4">6</div>
</div>
</div>
I am trying to build a website with flash-cards to help learn the Hebrew alphabet. My Card partial view looks like this:
#model FlashCards.MultipleChoice.ViewModels.CardViewModel
<div class="index-card">
<div class="row">
<div class="col-md-offset-5"></div>
<div class="col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2"></div>
<div class="col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
Now the col-md-offset works on all but the first row, causing the card to render as in the below image:
Now why isn't the 1 in the image offset like the glyph and the name for the letter Aleph?
My CSS file for these cards only contains the following so far:
.index-card {
height: 150px;
}
.index-card .card-symbol {
font-size: large
}
I believe you're using the offset classes wrong; do not apply them to empty divs.
Your text is centered. Second and third rows have widths of 8 columns. It looks like the offset is working but it really isn't. The first row is only 2 columns wide. None of your offset divs are having any effect on the layout.
You need to do something like this, at the very least:
<div class="index-card">
<div class="row">
<div class="col-md-offset-5 col-md-2 text-center">
#Model.Numeric
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center card-symbol">
#Html.Raw(Model.UnicodeEscape)
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
#Model.Name
</div>
</div>
</div>
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I want a Bootstrap column to resize buttons nicely when the screen type changes. But the buttons end up with no space between them and and two separate lines (on the small screen).
How do I get them to resize into smaller buttons, and not split onto a new line?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example!</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-3 col-xs-offset-4">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you want the same styling for small devices as well as large devices, you can omit the md styling and just use sm. If the width get's really small, you can remove the offset and use that gained width on the elements instead on xs widths.
To fix the buttons being cut off, remove the btn-block class.
Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
Add Item
</div>
<div class="col-sm-3 col-xs-6">
Remove Item
</div>
</div>
As a side note, if you want the buttons to be centered here, use offset 3 instead of 4.
If i am clear then try my updated code.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-3 col-xs-6 text-center">
Add Item
</div>
<div class="col-sm-3 col-xs-6 text-center">
Remove Item
</div>
</div>
You could use col-xs-3 instead of col-md-3 and col-xs-offset-4 instead of col-md-offset-4
Remember that bootstrap grid row is of 12 column, so what ever offset or column you are using it should add up to 12 and to target small screen devices such as mobile use col-xs-*. Everything else is fine.
<div class="form-group">
<div class="col-xs-3 col-xs-offset-6">
Add Item
</div>
<div class="col-xs-3">
Remove Item
</div>
</div>