Hi, I am new to using bootstrap. Can anyone help me figure out how to achieve the look in the image using bootstrap-04? I want this design to be consistent across all devices, but I am having trouble implementing it. Any guidance is appreciated.
Thank you!
Here is my code: code sample
To enhance the layout, ensure to include width:50%; in both .nav-tabs li and .base-block
.nav-tabs {
display: flex;
flex-wrap: wrap;
overflow:hidden;/*added*/
}
.nav-tabs li {
box-shadow: -25px 0 0 -23px gray, 0 25px 0 -23px gray;/*update*/
padding: 50px;
width:50%;
}
#container .nav-tabs {
background-image: image(bg-line-bar.png);
width: auto;
height: auto;
}
...
...
...
#container .nav-tabs>li.active>a {
border: none;
}
.block {
width: 203px;
height: 90px;
...
}
...
...
...
.base-block {
display: inline-block;
height: 120px;
...
}
.base-block h1,
h4 {
color: #000000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<ul class="nav nav-tabs" role="tablist">
...
...
...
...
</ul>
<!--Menu Part 02-->
<div class="tab-content">
...
...
...
</div>While assigning a line-height to text elements like div, span, or p and dragging them in the browser, an unsightly empty space appears within the selection box: https://i.sstatic.net/Ws08H.png I am seeking a way to elevate the actual text content within ...
Here are the two image layers: https://i.sstatic.net/lUUQC.jpg One shows a hand holding a phone, and the other is a black hole. This is how you can achieve it using HTML markup: <div class="wrapper"> <img class="wrapper__image" src="path/to/ ...
Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...
I am currently developing a custom element that displays playing cards using SVG images as the background. I want to make sure that the background image changes whenever the attributes related to the card's suit or rank are updated. From what I under ...
Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...
I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...
I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...
Currently, I am working on an Angular project where I need to generate a printable document using CSS. The challenge I am facing is ensuring that the date and title in the header do not print automatically when the document spans multiple pages. Additional ...
My mobile-first slider features three different types of images: tall, horizontally long, and square. I want the size of the slider to be determined by the horizontally long image and then scale and center the other images to fit its size. To achieve this, ...
There are two queries I have regarding the Bootstrap slider. First, how can I implement a change event in the BootstrapSlider and retrieve the value? Secondly, how can I modify the initial value of the Bootstrap slider? ...
I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...
If what I am attempting is not feasible, please inform me. I am currently working on displaying images of various sizes without distortion. While most images look good, those with a smaller width than the container of 285px are getting distorted. I am fin ...
I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...
I'm trying to figure out how to make a cell that spans the full width of the existing column and sits on top of the nearest cell. This is part of an effort to create a percentage graph. For example: https://i.sstatic.net/XZahG.png I've experim ...
Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device. I suspect that the issue may ...
My theme features various styles, including different color schemes. Currently, I load the default CSS first and then an additional stylesheet with specific colors based on the chosen color scheme. However, this process is causing a delay in my site' ...
Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctua ...
I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent. To see the issue in action, chec ...
I am facing an issue where only half of the image shows up when inserting the fixed effect. I need the entire image to be visible on the right side while adapting it for mobile devices. * { margin: 0; padding: 0; box-sizing: border-box; } .con ...
I have been struggling to find a solution to fix the header in a flex div and allow the rest of the content to scroll if needed. This issue has come up multiple times, especially when working with tables that have a fixed header and scrollable content. I h ...