I have two rows in contianer.
Now i am trying to interchange one grid element with the other in mobile layout.
But i am not able to get how to interchange for only specfic case as both are in two different rows classes.
For the Desktop app
For the Mobile Layout currently it is showing as
Actually i want the layout to realign only 3rd grid to come above as shown in picture below.
For the refernce i am attaching jsfiddle of the same. LINK
HTML Code :
<div class="container">
<div class="container">
<div id="graphArea" class=" row" >
<div class="col-lg-4 col-md-4">
<span class="label label-warning"><span class="badge">1:</span> First </span>
</div>
<div id="rightgrid" class="col-lg-6 col-md-6">
<span class="label label-warning"><span class="badge">2:</span> Second </span>
</div>
<div id="extright" class="col-lg-1 col-md-1">
<span class="label label-warning"><span class="badge">4:</span> Fourth </span>
</div>
</div>
<div class="row borderbottom">
<div id="inputDiv" class="col-md-6">
<span class="label label-warning"><span class="badge">3:</span> Thrid</span>
</div>
<div>
CSS Code:
.borderbottom
{
border: 2px solid #999;
margin-top:5px;
margin-bottom: 5px;
}
Please let me know the current problem work around or guide me with ways i can do it.Thanks
you can copy the sections and add visible and hidden classes to them
like in this fiddle
.hidden-xs, .visible-xs-inline-block
for better usage, you can use nginclude (if you use angularjs) to avoid duplicate html and specify bootstrap grid-float-breakpoint (if you use boostrap sass) for better visible/hidden handling.
Related
I'm trying to create two panels in bootstrap with centralized text and different fonts in the text. Like the image below
My code:
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default text-center">
<p>
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
However, my output is:
How can I have the "shadow" outside the panels and the text inside in similar font to the image above?
Thanks you
I also used to face this problem. So, here is the workaround.
Add the top-level child divs and give them padding (like p-1). This is their only job.
Within each top-level div, add your cell's main content, and style them however you want.
This is the code
<div class="parent row">
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Collected This Quarter <br>
<b>$8084</b>
</p>
</div>
</div>
<div class="col-lg-6 p-1">
<div class="shadow-sm text-center child">
<p class="p-0 m-0">
Average Property Income YTD <br>
<b>$16,985</b>
</h4>
</div>
</div>
</div>
Normally I reset padding and margins for .row and .col classes
<style>
.row, .col-lg-6 {
padding: 0;
margin:0;
}
.child {
background-color: white;
}
.parent {
background-color: #F3F4F5;
}
</style>
The result is like this
NOTE: I've used bg-dark and bg-light classes for showing the background colors of parent and child divs. You can give them whichever color you want.
Check out this, used .panel-body wrapper
https://jsfiddle.net/420gwtLz/7/
I will suggest using the latest version of Bootstrap, you will get utility classes for shadow and spacing.
I would like to center some content in a row using the Bootstrap grid system. I have looked at many examples about this including this, but my example differs because of the use of a separate angular component to generate the content.
app.component.html:
<div class="row" style="border:1px solid red;">
<div class="col d-flex justify-content-center">
<button mat-raised-button>text</button>
<app-child-component></app-child-component>
</div>
</div>
child-component.html:
<div *ngFor="let text of buttonText">
<button mat-raised-button>{{text}}</button>
</div>
child-component.ts:
buttonText = ['Button1', 'Button2', 'Button3'];
This gives the result:
But I would like all buttons to be horizonally aligned:
StackBlitz example:
https://stackblitz.com/edit/github-t6uyxp-z6is8f?file=src%2Fapp%2Fchild-component%2Fchild-component.component.ts
Just add display: flex to the wrapper container:
Better to add class instead of inline style. Inlining was done for demo only
<div style="display:flex">
<div *ngFor="let text of buttonText">
<button mat-raised-button>{{text}}</button>
</div>
</div>
This is my current code
.tag-container.bottom-border.col-middle
h1.text-center {{ tag.name }}
button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow
I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?
Thanks.
Update
This is the simplified code about basic html
<row>
<div>
<h1> Tag name</h1>
</div>
<div class="pull-right">
<button>Follow</button>
</div>
</row>
Feel free to work on it. Thanks
If you want to stick to pure bootstrap styles, something like this would work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Tag name</h1>
</div>
<div class="col-md-1 text-center">
<button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
</div>
</div>
You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).
Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.
I am using Bootstrap grid system. The spacing between rows is too large.
How can I reduce it?
<div class="row">
<div class="col-md-6">
<h1 id="Heading"> Heading </h1>
<div class="row" style="margin-left:6px;">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
</div>
</div>
</div>
<div>
There are 2 quick solutions possible for this:
Edit bootstrap core css/sass which will be a bad idea as it will affect core functionality of page scaffolding.
Write a separate class and add it in your div for ex:
.row-bottom-margin { margin-bottom:20px; }
and you can use it as
<div class="row row-bottom-margin">
Option 1 is not suggested until unless you are really looking for this change to be applied at all the relevant places and do consider your future designs.
Hope this helps!
Using Bootstrap 4 now you no more need to use any CSS for this as it has utility classes for this purpose.
By default, row elements expands in related to their childs. So your problem is not in .row class but in #rect
On rect element you have a line-height of 1.4 by default bootstrap css. Make it a class rather than id.
You can reduce it to 1.2 for your case...
Do it on a separate css file and overwrite it. That would be a better design for you.
.rect {
line-height: 1.2; // overwrite it on a different css if you prefer
}
In twitter bootstap there is a default margin-bottom:15px property set between rows of the grid system.You can remove this property or overwrite the margin property
<div class= "row marginRow"></div>
Your Css
.marginRow{
margin-bottom:0px !important;
}
or just remove any margin present using
.marginRow{
margin:0px !important;
}
(Before I start, yes I have asked a similar question before; unfortunately due to new information being added, the markup has completely changed for the worse, and it's now impossible for me to figure out.)
I have some very ugly markup generated by a Drupal view. Because many of the class names can be used in multiple places, in various levels of the hierarchy (for example, the first view-content/view-grouping/view-grouping-header needs to float left (or at least the contents of it do for the headshot image, but the other view-grouping-header elements need to display to the right of the image), I can't just address the class names; I need to get the full hierarchy. I'm having some trouble with that... (I know someone is going to come along and say, "but you can add classes to fields in Drupal views; why not do that?" Well, you can if you're displaying individual fields, but in this case I need to group by 5 of the 6 fields that are displayed, and when you group by a field you set the field itself to be excluded from the display, which means any custom classes you add to the field are ignored. The only thing you can do stylewise with grouping is apply a single class to all rows, which I've done but doesn't help in this case.)
<div class="view-clone-of-speaker-list">
<div class="view-content">
<div class="view-grouping">
<div class="view-grouping-header">
<div id="file-741" class="file file-image file-image-jpeg
contextual-links-region">
<div class="content">
<img src="johndoe.jpg" width="180" height="180" alt="" />
<!-- this img needs to float left -->
</div>
</div>
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
John Doe
<!-- this view-grouping-header a needs to be styled differently
than the one the next level down (view full profile) -->
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Freelance consultant
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
Path to Purchase Institute
</div>
<div class="view-grouping-content">
<div class="view-grouping">
<div class="view-grouping-header">
<a href="/speaker/john-doe">
view full profile ></a>
</div>
<div class="view-grouping-content">
<h3>Sessions:</h3>
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 2
</span>
</div>
</div>
<div class="views-row views-row-2 views-row-even views-row-last">
<div class="views-field views-field-title-1">
<span class="field-content">
Keynote Address 1
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I've tried, for example, to get the outer view-grouping - I want to put a border around the entire thing:
.view-clone-of-speaker-list.div.view-content.div.view-grouping {
border: 1px solid #a8a8a8;
}
But according to Firebug the element is not getting that style.
Here's the desired outcome; I don't need help (I don't think!) with the actual style code; I just need a hand figuring out how to address the correct elements given how frakkin' awfully they're nested.
A period on a selector means "class"; div.myClass means a div with a class of myClass. div.myClass.div.myOtherClass doesn't mean anything.
I think what you want is
div.view-clone-of-speaker-list>div.view-content>div.view-grouping {
border: 1px solid #a8a8a8;
}
That means "a div with a class of view-grouping, which is a child of a div with a class of view-content, which is a child of a div with a class of view-clone-of-speaker-list".