Gtjkyu

No rounded corners on React-Bootstrap-NavItem I want to have the same look as the pills style but without the rounded corners pills this is what i have so far <style type="text/css">{` .nav-pills > li + li { border-radius: 0 !important; } `}</style> <Nav bsStyle="pills" justified activeKey={this.props.currentStep} onSelect={this.updateCurrentStep.bind(this)} > <NavItem eventKey={1} title="Template">Template</NavItem> <NavItem eventKey={2} title="Edit">Edit</NavItem> <NavItem eventKey={3} title="Preview">Preview</NavItem> </Nav> How do I set the border-radius of my NavItem to 0? It does appear in the rules of the li item but it does not change anything. border-radius NavItem li 2 Answers 2 There are many different (and arguably better) ways to handle...

Bootstrap - custom alerts with progress bar I am trying to customize the bootstrap 3.3.7 alert class in order to add a progress bar and inline items to achieve something like this ( the dotted line is just to demonstrate that items are aligned ): alert However, I have problem in fitting the progress bar at the bottom of the right part with a width of 100%. Also, I have problem to adjust the height of the left part to 100% and ajust the icon in the middle. width height I am not sure if I am using the correct css strategy, but this is what I have done so far: /* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left: 0; right: 0; margin: 0 auto !important; width: 480px !important; } .leftPart { display: inline-block !important; height: 100% !important; width: 32...